Dimensions Of A Canvas

I found this pretty awesome blog post that explains how to resize a canvas to fit any screen http://www.html5rocks.com/en/tutorials/casestudies/gopherwoord-studios-resizing-html5-g

Solution 1:

Both the canvas itself and the canvas element have a width and height. If they're not the same, the content of the canvas is automatically scaled to fit the element. So yes, you could define your canvas to be the size you want, and define the element such that it scales. Naturally, though, everything scales, and if the aspect ratio is different, your shapes get distorted.

The width and height of the canvas within the canvas element are controlled by the width and height attributes of the canvas element. (They default to 300 and 150, respectively.)

The width and height of the canvas element are controlled by CSS; they default to the width and height of the canvas, but you can override that with CSS.

For example: Here's a canvas that's 300x300 (thanks to the CSS), within a canvas element that's only 300x150 (because those are the default width and height of the canvas element). You can see the effect of scaling when I draw a circle in it — it comes out oval instead:

// Get the canvas elementconst canvas = document.getElementById("clock");
// Get the 2D rendering context for itconst context = canvas.getContext("2d");

// Show the canvas's dimensions (NOT the dimensions of the element)document.getElementById("dimensions").innerHTML = canvas.width + "x" + canvas.height;

// Draw a circle -- it comes out oval because of scalingconst path = newPath2D();
path.arc(75, 75, 50, 0, Math.PI * 2, true);
context.fillStyle = context.strokeStyle = "blue";
context.fill(path);

canvas#clock {
    width: 300px;
    height: 300px;
    background: #1E1E1E;
}

<canvasid="clock"></canvas><divid="dimensions"></div>

Here's an example where the canvas and its container are the same width and height, so there's no scaling; the code is identical, it's just I've added width="300" height="300" to the canvas HTML:

// Get the canvas elementconst canvas = document.getElementById("clock");
// Get the 2D rendering context for itconst context = canvas.getContext("2d");

// Show the canvas's dimensions (NOT the dimensions of the element)document.getElementById("dimensions").innerHTML = canvas.width + "x" + canvas.height;

// Draw a circleconst path = newPath2D();
path.arc(75, 75, 50, 0, Math.PI * 2, true);
context.fillStyle = context.strokeStyle = "blue";
context.fill(path);

canvas#clock {
    /* We could comment out the width and height properties
       since they'll default to the values from the attributes
    */width: 300px;
    height: 300px;
    background: #1E1E1E;
}

<canvasid="clock"width="300"height="300"></canvas><divid="dimensions"></div>

The automatic scaling is handy provided you ensure the aspect ratio of the element and its canvas are the same. If you don't directly set the size of the canvas element, on most browsers it will default to the aspect ratio of the canvas thanks to the width and height attributes. From MDN's coverage of aspect-ratio:

Browsers have added an internal aspect-ratio property that applies to replaced elements and other related elements that accept width and height attributes. This appears in the browser's internal UA stylesheet.

In Firefox, the internal stylesheet rule looks like this:

img, input[type="image"], video, embed, iframe, marquee, object, table {
  aspect-ratio: attr(width) / attr(height);
}