Menu
See update above. thx for your help - I set the min-width and min-height to 60% for the div and canvas in the css then set the canvas to style="width:70%; height:60%" in my html.
Try It: Set the width of an image using a percentage and resize your browser window. For the width attribute, you can also use percentages, where 100% is the total space available. So, if you wanted an image to be one quarter the width of the window, you could set width to 25% (one quarter of 100% is 25%).
HTML | <canvas> width Attribute The HTML <canvas> width Attribute is used to specify the width of the <canvas> in terms of pixels. Attribute Values: It contains the value i.e pixels which specify the width of the canvas in terms of pixel. It has a Default value which is 300.
You can get the width and height of a canvas element simply by accessing those properties of the element. For example: var canvas = document. getElementById('mycanvas'); var width = canvas.
You need to set the size of the canvas in pixels or you will not only reduce the quality of its content but if you want to draw on it the mouse-coordinates will be off as well. Don't use CSS to scale canvas if you're gonna use it interactively.
I would recommend you adjust your image then adopt the canvas to whatever size the image is. You can do this by using getComputedStyle(element) which gives you whatever size the element is set to in pixels.
After image's onload (as you need to be sure the image is actually loaded to get its size) or later if you change the image (CSS) size on the go, you can do this:
/// get computed style for image
var img = document.getElementById('myImageId');
var cs = getComputedStyle(img);
/// these will return dimensions in *pixel* regardless of what
/// you originally specified for image:
var width = parseInt(cs.getPropertyValue('width'), 10);
var height = parseInt(cs.getPropertyValue('height'), 10);
/// now use this as width and height for your canvas element:
var canvas = document.getElementById('myCanvasId');
canvas.width = width;
canvas.height = height;
Now the canvas will fit image but with canvas pixel ratio 1:1 to help you avoid problems when you're gonna draw on the canvas. Otherwise you will need to convert/scale the mouse / touch coordinates as well.
Resize Your canvas to fit Window/Browser Size :
<script>
function resizeCanvas() {
var canvs = document.getElementById("snow");
canvs.width = window.innerWidth;
canvs.height = window.innerHeight;
}
</script>
<body onload="resizeCanvas();">
<canvas id="snow" ></canvas>
</body>
Set the canvas height to the window's innerHeight and the width to the window's innerWidth:
canvas.height = window.innerHeight;
canvas.width = window.innerWidth;
If you want a specific percentage, multiply them by the percentage. Example:
//25% of width and height
canvas.height = window.innerHeight * 0.25;
canvas.width = window.innerWidth * 0.25;
//And so on for other percentages
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With