1.7 KiB
title |
---|
Canvas Dimensions |
Canvas Dimensions
The width
and height
attributes will control the size of the canvas. These attributes control the size of the drawing canvas, not the actual rendered size.
See the Pen Canvas dimensions demo by Alan Luo (@alanluo) on CodePen.
In the above pen, both canvas
elements have the same dimensions set through CSS. However, one has twice the height set through the height
attribute, thus leading the exact same rectangle to become rendered at half the height.
This can cause problems when you want to make a dynamically sized canvas. For instance, you may want to make a full-screen canvas, or use a canvas as a thumbnail.
In order to make the size of the drawing context match the rendered size of the canvas
element, we have to force this in realtime. One common practice is to put the following handler in the onResize
listener.
// somewhere early in the script
var canvas = document.getElementById("canvas");
...
window.addEventListener("resize", function() {
canvas.setAttribute("width", canvas.scrollWidth);
canvas.setAttribute("height", canvas.scrollHeight);
console.log(canvas.offsetWidth);
});