The Canvas Has Two Sizes

Liet serves two masters.” —Stilgar (Frank Herbert’s Dune)

If you are about to start working with HTML5 canvas, there is something that you NEED to know. The canvas has two sizes. You are reading correctly. Two. Not one. But. Two sizes.

The first one is the element size (what you will set using CSS) and the second is the size of the actual drawing surface. Think of it as having a blank piece of paper where you can only draw in a certain rectangle.

If you are drawing in an smaller rectangle than the piece of paper its fine right. In the HTML5 canvas, however, the User Agent (your browser) will scale the rectangle to fill the  piece of paper one drawing is done. Trust me, I have been there. Isn’t going to look that good.

What to do? To avoid any unintended scaling you just need to sync the drawing surface to the element size when you are about to draw:

var canvas = document.getElementById('canvas');
canvas.width = container.offsetWidth;
canvas.height = container.offsetHeight;
var context = canvas.getContext('2d');

Happy drawing!