Resize Html5 Canvas to Fit Window

Resize HTML5 canvas to fit window

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.

Resize canvas size as window is being resized (JavaScript)

You can have a callback onresize and use that to recreate the canvas:

Each time you resize the window you'll have to redraw the canvas, unless you save it somewhere.

function init() {  const canvas = document.querySelector("#sandBox");  canvas.width = window.innerWidth;  canvas.height = window.innerHeight;  const ctx = canvas.getContext("2d");
  class Circle {    constructor(x, y, r, c) {      this.x = x;      this.y = y;      this.r = r;      this.c = c;    }
    draw() {      ctx.beginPath();      ctx.fillStyle = this.c;      ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);      ctx.fill();      ctx.closePath();    }  }
  const balls = [];
  for (let i = 0; i < 20; i++) {    let r = Math.floor(Math.random() * 30) + 15;    let x = Math.random() * (canvas.width - r * 2) + r;    let y = Math.random() * (canvas.height - r * 2) + r;    let c = "rgba(255,255,255,0.2)";    balls.push(new Circle(x, y, r, c));  }
  balls.forEach((ball) => ball.draw());}
window.onload = function() {  init();};

body {  position: relative;}
canvas {  width: 100vw;  height: 100vh;  background-color: #393939;  position: absolute;  top: 0;  left: 0;  z-index: -1;}

<body onresize="init()">  <canvas id="sandBox"></canvas></body>

Scale full screen canvas to fit content as window changes size

Here is a sample where the elements in the canvas shrink and grow with the windows size:

<style>body{margin:0}</style>
<canvas id="mainCanvas"></canvas>


<script>
var canvas = document.getElementById("mainCanvas");
var ctx = canvas.getContext("2d");

function resize() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    var gridOptions = {
        majorLines: {
        separation: 20,
        color: '#e8e8e8'
        }
    };
    drawGridLines(canvas, gridOptions.majorLines);
}

function drawGridLines(canvas, lineOptions) {
    ctx.strokeStyle = lineOptions.color;
    ctx.strokeWidth = 1;
    ctx.beginPath();

    var size = Math.floor(canvas.width / lineOptions.separation);
    for (var i = 1; i <= lineOptions.separation; i++) {
        var x = (i * size);
        ctx.moveTo(x, 0);
        ctx.lineTo(x, canvas.height);
        ctx.stroke();
    }
    for (var i = 1; i <= Math.floor(canvas.height / size); i++) {
        var y = (i * size);
        ctx.moveTo(0, y);
        ctx.lineTo(canvas.width, y);
        ctx.stroke();
    }
    ctx.closePath();
}

window.onresize = function() { resize(); }
resize();
</script>

Here is a live sample:

https://raw.githack.com/heldersepu/hs-scripts/master/HTML/canvasResize2.html

HTML5 canvas, fit to (rest of) screen

And if you remove the nav height ?

var canvas = document.getElementById("game");
var ctx = canvas.getContext("2d");
var menu = document.getElementById('nav') 
resize_canvas();
document.body.appendChild(canvas);

// Attempt at auto-resize
function resize_canvas(){
    canvas.width  = window.innerWidth;
    canvas.height = window.innerHeight - menu.offsetHeight;
}
window.addEventListener("resize", resize_canvas);
window.addEventListener("orientationchange", resize_canvas);

and

canvas {
    position:relative;
}

HTML5 Canvas fit to window

Set the the canvas position to absolute. Also make sure there is no padding, or margins set in the containing element.

This is what I use on all of my full screen canvas demos.

body, html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
canvas {
    position:absolute;
}

Full Screen Demo

Resizing canvas to fit within container

I think what you want / need is to resize the canvas so that it fits into the container, while keeping the aspect ratio which you have specified.

You can use this function to resize some rectangle (rect) so that it fits into some other rectangle (container):

// fit a rect into some container, keeping the aspect ratio of the rect
export const fitRectIntoContainer = (rectWidth, rectHeight, containerWidth, containerHeight) => {

    const widthRatio = containerWidth / rectWidth;    // ration container width to rect width
    const heightRatio = containerHeight / rectHeight; // ration container height to rect height

    const ratio = Math.min( widthRatio, heightRatio ); // take the smaller ratio

    // new rect width and height, scaled by the same ratio
    return {
        width: rectWidth * ratio,
        height: rectHeight * ratio,
    };
};

Then you can resize the canvas so that it fits into the container:

const canvasSize = fitRectIntoContainer( 700, 600, size.width, size.height );
const canvasWidth = canvasSize.width;
const canvasHeight = canvasSize.height;

Then I guess you don't need any scaling anymore (so scaleX and scaleY can be both 1, or undefined)

Get Canvas to dynamically resize when browser window is resized

~~This solution has a flicker effect on resize, but it looks good at any size.~~

By fully using JQuery in changing the width/height, it got rid of the flicker. Here's an improved version:

JS:

$(function(){
    resizeCanvas();
});

$(window).on('resize', function(){
    resizeCanvas();
});

function resizeCanvas()
{
    var canvas = $('#canvas');
    canvas.css("width", $(window).width());
    canvas.css("height", $(window).height());
}

JSFiddle

The reason for using JQuery instead of using plain CSS is that the background canvas is absolutely positioned.

A JQuery hack isn't preferable if it can be helped, but it seems like the best choice for this situation.

Resize Html5 Canvas to Fit Window