My current canvas size is set within the col-sm-6 bootstrap class. However, I would like to display a larger canvas if it falls within the col-sm-12 bootstrap class. The classes col-sm-6 and col-sm-12 are generated dynamically from the backend, so I need to determine if the canvas is within the col-sm-6 or col-sm-12 class in order to adjust the width accordingly.
The first, smaller canvas could be sized at 500*400:
<div class="s-field col-sm-6">
<label class="control-label mb5">first canvas image </label>
<canvas id="canvas-id-1" class="image-canvas"></canvas>
</div>
The second canvas should be larger, maybe 800*400:
<div class="s-field col-sm-12">
<label class="control-label mb5">second canvas image </label>
<canvas id="canvas-id-2" class="image-canvas"></canvas>
</div>
let canvas = document.getElementById('canvas-id');
let ctx = canvas.getContext("2d");
// If I know that the canvas is within the class col-sm-12, I can set dimensions to 800*400
if (document.querySelector('.col-sm-12')) {
canvas.width = 800;
canvas.height = 400;
} else {
// Otherwise, I will create a smaller canvas
canvas.width = 500
canvas.height = 400
}
var image = new Image();
image.src = 'http://t2.gstatic.com/images?q=tbn:ANd9GcQQveW9AJCxOC8Phnq3vptJIxPFHlxNw63q4pudc66dM4O96vtm';
image.onload = function () {
var ctx = canvas.getContext('2d');
ctx.drawImage(image,
canvas.width / 2 - image.width / 2,
canvas.height / 2 - image.height / 2
);
}