Html5 Canvas Zoom Where Mouse Coordinates

How to zoom background image with drawings where mouse coordinates. Zooming only in center with mouse event mousewheel me code: http://jsfiddle.net/gamealchemist/74MCQ/4/ Drawing

Solution 1:

Annotated code and a Demo: http://jsfiddle.net/m1erickson/asT8x/

// clear the canvas

ctx.clearRect(0,0,canvas.width,canvas.height);

// save the context state

ctx.save();

// translate to the coordinate point you wish to zoom in on

ctx.translate(mouseX,mouseY);

// scale the canvas to the desired zoom level

ctx.scale(scale,scale);

// draw the image with an offset of -mouseX,-mouseY
// (offset to center image at the selected zoom point);

ctx.drawImage(img,-mouseX,-mouseY);

// restore the context to its untranslated/unrotated state

ctx.restore();