I have a canvas element with dimensions of 979X482px and I’d like to have it stretch to fit the width of any given browser window, keeping the aspect ratio of width/hight 1 to 1, I want the height to scale relative to width of the canvas. Any suggestions as how to go about doing this with javascript/jQuery?
Advertisement
Answer
First you set the width of canvas to 100%
$('#canvas').css('width', '100%');
then update its height base on its width
$(window).resize(function(){ $('#canvas').height($('#canvas').width() / 2.031); });
2.031 = 979/482
But you should not attach to $(window).resize like me… it’s a bad behavior