Scaling HTML5 canvas width preserving w/h aspect ratio

 ctx.canvas.width = window.innerWidth;

 ctx.canvas.height = 3*window.innerWidth/4;

or some variation of that. ctx is the context. An if statement for edge cases might be necessary!

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

Related