Resize a JavaScript Canvas to fit your browser size

From The IT Community
Jump to: navigation, search




Here is how to resize a JavaScript Canvas to fit your browser size:

The following script sets the size of the canvas to the size of the browser window it is in:

<html>
 <head>
   <title>The IT Community Script</title>
 </head>
 <body>
   <canvas id="myCanvas"></canvas>
   <script type='text/javascript'>

       var CANVAS_WIDTH = window.innerWidth;
       var CANVAS_HEIGHT = window.innerHeight;

       var canvas = document.getElementById('myCanvas');
	
       canvas.width = CANVAS_WIDTH;
       canvas.height = CANVAS_HEIGHT;
		
 </body>
</html>

The important thing here is

var CANVAS_WIDTH = window.innerWidth;
var CANVAS_HEIGHT = window.innerHeight;

which gives you the size of the window (=browser).

Plus, you can use the two variables CANVAS_WIDTH and CANVAS_HEIGHT to place stuff inside your canvas.



Was this article helpful? Then please donate to keep The IT Community alive...

If you found this article helpful please share it, comment and help others by writing your own article.






Translate this page:




Articles found in the same category:
(max. 20 shown)