Scaling HTML5 canvas width preserving w/h aspect ratio

Question

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?

Calculate the new width and height and apply them via jquery/javascript. There's tons of information out there on how to calc dimensions keeping proportions. Have you tried anything yourself? Some code you're having problems with, maybe? — Yoshi, May 25 '12 at 07:28
Does this answer your question? [Maintain the aspect ratio of a div with CSS](https://stackoverflow.com/questions/1495407/maintain-the-aspect-ratio-of-a-div-with-css) — TylerH, Apr 07 '23 at 15:08

score 15 · Answer 1 · edited Oct 29 '12 at 22:20

15

 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!

edited Oct 29 '12 at 22:20

Shane

1,015
2
12
31

answered May 30 '12 at 04:28

score 8 · Accepted Answer · edited Mar 15 '14 at 17:24

8

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

edited Mar 15 '14 at 17:24

Loïc Faure-Lacroix

13,220
6
67
99

answered May 25 '12 at 07:34

James

13,571
6
61
83

Thanks for this, but I can't seem to get it working. Should `$('#canvas').height($('canvas').width() / 2.031);` be `$('#canvas').height($('#canvas').width() / 2.031);`, noting the ID? – dcd0181 May 25 '12 at 07:48
Yes, I forgot to put the #canvas – James May 25 '12 at 08:24
This will cause the content to be blurred. You need to manipulate the canvas context as the other answer states. – cyberwombat Jan 31 '13 at 01:57
1

You should set the canvas elements height / width attributes not the CSS attributes and redrawn the canvas. – hobberwickey Apr 02 '15 at 15:20
what about scaling an image on a responsive canvas? – oldboy Dec 16 '20 at 00:31

score 1 · Answer 3 · edited Nov 04 '19 at 19:41

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 = 3 * window.innerWidth / 4;
  </script>
</body>

score -5 · Answer 4 · answered May 25 '12 at 07:45

-5

Try this

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

answered May 25 '12 at 07:45

mehmood

2,550
3
15
9

1

This does NOT set scale, it simply sets canvas size to window width and window height. – shadryck May 19 '16 at 08:01

Scaling HTML5 canvas width preserving w/h aspect ratio

4 Answers4

Linked