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?
Scaling HTML5 canvas width preserving w/h aspect ratio
Asked Answered
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? –
Bandwagon
Does this answer your question? Maintain the aspect ratio of a div with CSS –
Kilauea
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
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? –
Polynesia Yes, I forgot to put the #canvas –
Vanillin
This will cause the content to be blurred. You need to manipulate the canvas context as the other answer states. –
Harmattan
You should set the canvas elements height / width attributes not the CSS attributes and redrawn the canvas. –
Kittiekittiwake
what about scaling an image on a responsive canvas? –
Valais
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
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? –
Polynesia Yes, I forgot to put the #canvas –
Vanillin
This will cause the content to be blurred. You need to manipulate the canvas context as the other answer states. –
Harmattan
You should set the canvas elements height / width attributes not the CSS attributes and redrawn the canvas. –
Kittiekittiwake
what about scaling an image on a responsive canvas? –
Valais
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>
Try this
$('#canvas').css('width', $(window).width());
$('#canvas').css('height', $(window).height());
This does NOT set scale, it simply sets canvas size to window width and window height. –
Poe
© 2022 - 2024 — McMap. All rights reserved.