Resize HTML5 canvas to fit window

Question

How can I automatically scale the HTML5 <canvas> element to fit the page?

For example, I can get a <div> to scale by setting the height and width properties to 100%, but a <canvas> won't scale, will it?

Answer 1

I believe I have found an elegant solution to this:

JavaScript

/* important! for alignment, you should make things  * relative to the canvas' current width/height.  */ function draw() {   var ctx = (a canvas context);   ctx.canvas.width  = window.innerWidth;   ctx.canvas.height = window.innerHeight;   //...drawing code... } 

CSS

html, body {   width:  100%;   height: 100%;   margin: 0; } 

Hasn't had any large negative performance impact for me, so far.

Answer 2

The following solution worked for me the best. Since I'm relatively new to coding, I like to have visual confirmation that something is working the way I expect it to. I found it at the following site: http://htmlcheats.com/html/resize-the-html5-canvas-dyamically/

Here's the code:

(function() {   var     // Obtain a reference to the canvas element using its id.     htmlCanvas = document.getElementById('c'),     // Obtain a graphics context on the canvas element for drawing.     context = htmlCanvas.getContext('2d');    // Start listening to resize events and draw canvas.   initialize();    function initialize() {     // Register an event listener to call the resizeCanvas() function      // each time the window is resized.     window.addEventListener('resize', resizeCanvas, false);     // Draw canvas border for the first time.     resizeCanvas();   }    // Display custom canvas. In this case it's a blue, 5 pixel    // border that resizes along with the browser window.   function redraw() {     context.strokeStyle = 'blue';     context.lineWidth = '5';     context.strokeRect(0, 0, window.innerWidth, window.innerHeight);   }    // Runs each time the DOM window resize event fires.   // Resets the canvas dimensions to match window,   // then draws the new borders accordingly.   function resizeCanvas() {     htmlCanvas.width = window.innerWidth;     htmlCanvas.height = window.innerHeight;     redraw();   } })();

html, body {   width: 100%;   height: 100%;   margin: 0px;   border: 0;   overflow: hidden;   /*  Disable scrollbars */   display: block;   /* No floating content on sides */ }

<canvas id='c' style='position:absolute; left:0px; top:0px;'></canvas>

The blue border shows you the edge of the resizing canvas, and is always along the edge of the window, visible on all 4 sides, which was NOT the case for some of the other above answers. Hope it helps.