Zoom HTML5 canvas to mouse cursor

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

The translate() method remaps the (0,0) position on the canvas. The scale() method enlarges or reduces the current graphic. If you want to pan() the canvas context by an offset, you need to first scale() it to zoom in or out, and then pan() it by the opposite position of the mouse offset.

These following examples give the steps

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

The above is the detailed content of Zoom HTML5 canvas to mouse cursor. For more information, please follow other related articles on the PHP Chinese website!