Menu
Code to make canvas occupy full page :width = window. innerWidth; canvas. height = window. innerHeight; //Done!
Resizing the canvas on the fly is quite easy. To do it, simply set the width and height properties of the Canvas object, and then redraw the canvas contents: Canvas . width = 600 ; Canvas .
All web browsers limit the canvas element's width, height, and area. For Google Chrome, the maximum allowable width and height are 32,767 pixels and the maximum allowable area is 268,435,456 pixels.
Similar to how i want a div to take 100% height, 100% width, or both. i want a Canvas to take 100% width and 100% height:
(Link to JsFiddle for your perusal)
Markup:
<div id="canvasContainer">
<canvas id="myCanvas"></canvas>
</div>
CSS:
html {
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
margin: 0;
}
#canvasContainer {
width: 100%;
height: 100%;
background-color: green;
}
#myCanvas {
width: 100%;
height: 100%;
}
Javascript:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(canvas.width, canvas.height);
ctx.stroke();
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(canvas.width, 0);
ctx.lineTo(0, canvas.height);
ctx.stroke();
Which results in something not taking 100% of browser window:
It works fine if you delete the Canvas:
Downside of that is then i don't have a Canvas.
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