A canvas context extension based on this example by phrogz.

A class wrapper for a 2D canvas context that keeps track of transform information, allowing for easy coordinate control with scaled/transformed canvases. Perfect for visual web apps that requires extra canvas functionalities without the hassle of custom canvas implementations.

npm i canvas-transform-context

import { TransformContext } from "canvas-transform-context"

import { TransformContext } from "https://unpkg.com/canvas-transform-context@latest/dist/bundle.min.js";

Basic setup

const canvas = getDocumentById(/* canvas id */)
const ctx = canvas.getContext('2d')

const transformCtx = new TransformContext(ctx);

transformCtx.onDraw((ctx) => {
  /* Draw on canvas... */
})

// Mouse dragging
canvas.addEventListener("mousedown", (e) => transformCtx.beginMousePan(e));
canvas.addEventListener("mousemove", (e) => transformCtx.moveMousePan(e));
canvas.addEventListener("mouseup", (e) => transformCtx.endPan(e));

// Wheel zooming
canvas.addEventListener("wheel", (e) => transformCtx.zoomByMouse(e));

Batteries-included methods for commonly use actions, included methods that can directly take mouse events as a parameter.

Begins a pan given the current position from the mouse event. Use on mousedown.

Pans the canvas to the new position from the mouse event. Use on mousemove. Does nothing if beginMousePan wasn't called, or if endPan was just called.

Ends a mouse pan. Use on mouseup.

Zooms via the mouse wheel event.

Sets the anchor for a panning action.

Pans the canvas to the new coordinates given the starting point in beginPan. Does nothing if beginPan was not called, or if endPan was just called.

Stops a pan

Zoom by a given integer amount.

Returns: Current zoom amount in integers

Resets all transformations

Creates a callback to be called after each action method above.

Helper methods to deal with coordinate transformations

Converts canvas coordinates to transformed coordinates

Returns: Transformed coordinates

Converts a mouse event to the transformed coordinates within the canvas

Returns: Transformed point

Clear the canvas given the current transformations

General purpose canvas helpers unrelated to transform

Converts a mouse event to the correct canvas coordinates

Returns: Canvas coordinates

Main implementation based on code by phrogz:

• http://phrogz.net/tmp/canvas_zoom_to_cursor.html
• https://github.com/Phrogz