Question

181

Scaling HTML5 canvas width preserving w/h aspect ratio

rated 0 times [ 184] [ 3] / answers: 1 / hits: 50230 / 12 Years ago, fri, may 25, 2012, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

tina

Add To Favorites

Follow

Total Points: 91

Total Questions: 106

Total Answers: 104

Location: Vanuatu

Member since Fri, May 13, 2022

2 Years ago

answered 12 Years ago wilson · Accepted 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