Implementing zoom on a fixed point, javascript/canvas

Posted by csiz on Stack Overflow See other posts from Stack Overflow or by csiz
Published on 2010-05-23T16:10:14Z Indexed on 2010/05/23 16:31 UTC
Read the original article Hit count: 198

Filed under:
|
|

I want to implement zooming on the mouse pointer with the mouse wheel. That is scaling the image while the point under the mouse pointer stays fixed.

Here is my code, which doesn't work very well

var scala = 1 + event.wheelDelta / 1000;
canvas.context.translate(-canvas.mouse.x * ( scala - 1 ) / canvas.scale,-canvas.mouse.y * ( scala - 1 ) / canvas.scale);
canvas.context.scale(scala,scala);
canvas.scale *= scala;
//canvas.scale is my variable that is initially set to 1.
//canvas.mouse is my variable that represents the mouse position relative to the canvas

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about html5