Menu
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. :(
226
Shift-click to zoom out. Mousewheel up/down over the canvas to zoom in to/out from that location.
On a Touch Screen On your canvas, use your thumb and index finger to zoom. Move your thumb and index finger away from each other to zoom in, and pinch two fingers towards each other to zoom out.
The HTML5 canvas has the potential to become a staple of the web, enjoying ubiquitous browser and platform support in addition to widespread webpage support, as nearly 90% of websites have ported to HTML5.
Sometimes this can be cleared easily by holding shift and pressing the refresh button in your browser.
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.
120
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
