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);
});