Zoom HTML5 Canvas to Mouse Cursor

The canvas always scales from its current origin. The default origin is [0,0]. If you want to scale from another point, you can first do ctx.translate(desiredX,desiredY);. This will reset the origin of the canvas to [desiredX,desiredY].

The translate() method remaps the (0,0) position on the canvas. The scale() method scales the current drawing, bigger or smaller. If you want to translate() the canvas context by your offset, you need to first scale() it to zoom in or out, and then translate() back by the opposite of the mouse offset.

These steps are given in the following example

ctx.translate(pt.x,pt.y);
ctx.scale(factor,factor);
ctx.translate(-pt.x,-pt.y);