CODEWITHSUNDEEP
javascripthtml5-canvasaspect-ratio
dcd0181
dcd0181

Reputation: 1503

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?

Upvotes: 13

Views: 61425

Answers (4)

Sabba Keynejad
Sabba Keynejad

Reputation: 8591

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>

Upvotes: 2

Nhu Trinh
Nhu Trinh

Reputation: 13956

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

Upvotes: 9

user1422770
user1422770

Reputation: 

 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!

Upvotes: 15

mehmood
mehmood

Reputation: 2600

Try this 

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

Upvotes: -5

Related Questions