Implement fixed-point scaling, javascript / canvas

Question

Possible duplicate:
Zoom in (using scale and translation)

I want to implement mouse pointer scaling with the mouse wheel. This zooms in on the image, while the point under the mouse pointer remains fixed.

Here is my code that 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 

Answer 1

Solved it and the answer is here: the same question

Answer 2

Despite everything else, you will need 2 translations: one before moving the mouse point by (0,0) and one after moving (0,0) (now with an enlarged image) to where the mouse was.

Answer 3

I assume that you need to do canvas.context.restore() after each redraw if you keep the zoom level.