Search code examples
javascriptcanvas

HTML5 Canvas: Zooming

Is there any easy way how to zoom in and back out in canvas (JavaScript)? Basically I have a 400x400px canvas and I'd like to be able to zoom in with 'mousedown' (2x) and go back with 'mouseup'.

Spent last two days googling, but no luck so far. :(

Solution

  • Building on the suggestion of using drawImage you could also combine this with scale function.

    So before you draw the image scale the context to the zoom level you want:

    ctx.scale(2, 2) // Doubles size of anything draw to canvas.

    I've created a small example here http://jsfiddle.net/mBzVR/4/ that uses drawImage and scale to zoom in on mousedown and out on mouseup.