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

Answer 1

Just use ctx.scale(x, y)

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

Answer 2

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.