zooming in a HTML5 Canvas

Question

I need some advice on how to set up zooming in and out of a HTML5 JavaScript canvas. I have the functions and switch statement set up just need advice on how to actually enable zoom.

I was considering just making it use the browsers zoom function as I only need it to work on Chrome. Is this recommended?

Thanks

Dupe of http://stackoverflow.com/questions/3420975/html5-canvas-zooming ? — Robin Jonsson, Dec 04 '12 at 01:44
Possible duplicate of [HTML5 Canvas: Zooming](https://stackoverflow.com/questions/3420975/html5-canvas-zooming) — SphynxTech, Aug 16 '17 at 10:54

score 3 · Answer 1 · edited Apr 01 '14 at 22:05

3

Just use ctx.scale(x, y)

Here is a direct link on MDN, however I advise you to read the whole article.

edited Apr 01 '14 at 22:05

TankorSmash

12,186
6
68
106

answered Dec 04 '12 at 11:39

rezoner

1,907
13
16

score 0 · Answer 2 · edited May 23 '17 at 10:34

You can scale in the canvas using the browser's zoom, but just be warned that a canvas is a raster image, so zooming in will introduce aliasing (jaggies). I haven't yet seen a way to draw on a zoomed-in canvas (i.e. canvas pixels are larger than display pixels) without aliasing. And it turns out to be very hard to even work out how much you are zoomed in: How to detect page zoom level in all modern browsers?

If, however, you zoom by redrawing on some event, even using ctx.scale(x, y) as @rezoner points out, rather than allowing the browser to zoom, then you can still draw without aliasing. For a smooth zoom, I would suggest using scale as a quick zoom while the use is zooming quickly, and performing a full-redraw every 1.3x or so and again when they stop zooming. That should give you something like the Google Maps behaviour where you get a rough zoom immediately (good responsiveness), but it updates the view as you continue to zoom.

zooming in a HTML5 Canvas

2 Answers2