Scaling HTML5 canvas width preserving w/h aspect ratio

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?

Trinh Hoang Nhu

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

 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!

All the previous answers are great, but they won't scale all the images drawn on the canvas proportionally with the new canvas size. If you're using kinetic, I've made a function here = http://www.andy-howard.com/how-to-resize-kinetic-canvas-and-maintain-the-aspect-ratio/

I was playing around with this for a while myself. The concept revolves around knowing the width of the canvas. You also need to make sure all your canvas assets also use calculations to for posting dependent on the browser with. I documented my code, I hope it helps,

<body>

    // in style make your canvas 100% width and hight, this will not flex for all browsers sizes.

<style>

canvas{
   width: 100%;
   height:100%;
   position: relative;
}

</style>

<canvas id="myCanvas"></canvas>

<script>

// here we are just getting the canvas and asigning it the to the vairable context

     var canvas = document.getElementById('myCanvas');
     var context = canvas.getContext('2d');

// no we get with of content and asign the same hight as the with. this gives up aspect ration 1:1.

     context.canvas.width = window.innerWidth;
     context.canvas.height = window.innerWidth;

// If you want aspect ration 4:3 uncomment the line below.
//context.canvas.height = window.innerWidth;

</script>

</body>

Try this

$('#canvas').css('width', $(window).width());
$('#canvas').css('height', $(window).height());

来源：https://stackoverflow.com/questions/10750125/scaling-html5-canvas-width-preserving-w-h-aspect-ratio

标签

javascript

html5-canvas

aspect-ratio