Scaling Your HTML5 Canvas to Fit Different ViewPorts (or Resolutions)

I am going to share a neat little trick that was learnt while working on an HTML5 game recently. The game is pretty much like our HTML5 Doodle Jump. We had to make sure that the game scales down very well on smaller devices like mobiles, ipads, tablets, etc. and in the process learnt a neat trick to scale the entire canvas across all devices consistently.

The Trick: Scaling with CSS

Well, the obvious solution that comes to mind for this purpose is using the scale() transformation method on the canvas context. You just derive the factor from the ratio and pass on to the function.

But let’s look at how to do it with plain simple CSS.

What's the one thing every developer wants? More screens! Enhance your coding experience with an external monitor to increase screen real estate.

The HTML:

<canvas width="300" height="400"></canvas>

The canvas has a dimension of 300x400. Let’s say the window is resized by half or you try to render the canvas on a resolution that is half, you can simply set the CSS width and height properties to scale the canvas.

canvas {
	width: 150px;
	height: 200px;
}

Now you might think that the CSS code will just resize the canvas, just like it happens with images. But actually along with resizing the canvas DOM element, your drawings inside the canvas context will also get resized (Demo later)!

To make it more dynamic, you can add some code to the load and resize events on the window object that would multiply the default width/height ratio (300/400 in our case) to your desired height (window.innerHeight if it is occupying 100% height) to figure out the proper scaled width. Ofcourse the same can be done with width to figure out the proper height. Now, the scale factor can be used to scale other things like the DOM elements.

This might seem really confusing, so I prepared a quick little demo. Just resize the code editor or the browser window to see the magic.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download

Author: Rishabh

Rishabh is a full stack web and mobile developer from India. Follow me on Twitter.

6 thoughts on “Scaling Your HTML5 Canvas to Fit Different ViewPorts (or Resolutions)”

  1. Probably the firs thing that comes to anyone’s mind, but it really ruins how your images in the canvas look. Everything pixelates a lot more than if you used ctx.scale(xScale, yScale);

  2. Thanks so much for the code. I have an animation that draws a complex line figure on the canvas. This solved the issue of how to make it work in small devices. Thanks again.

  3. If you scale the image up how can you prevent it from bitmapping horribly? i.e. is there an easy way to scale up a canvas image and increase the canvas size to accommodate it, so increasing the effective resolution of the image and prevent the bitmapping?

  4. didn’t work at all for me. I don’t want my canvas the full height anyway. width, yes, so tried swapping that out, still no impact. I guess I’ll just keep looking for a cure.

Leave a Reply

Your email address will not be published. Required fields are marked *

*