Drag, drop and zoom with native Canvas

By /

A tutorial on infinite canvases that helps developers understand and implement the concepts and functions of infinite canvases.
Infinite Canvas is an interface that allows users to freely organize content in a non-linear manner, supporting functions such as zooming, intuitive editing of basic graphics such as moving, grouping, and modifying styles.”

Of course! Let me give you a cutthird partexplain xiaoiver/infinite-canvas-tutorial The core content of the project allows you to understand its design ideas more clearly:

1. Project goal: Create a basic “infinite canvas”

  • The goal is to make the canvas availabledrag (pan)、Zoom, and elements on the screen (such as dots, rectangles) correctly follow the transformation as you drag or zoom.
  • focused onThe view is manipulated, not the element itself。In other words, the graphics coordinates are fixed, and the user is looking at the canvas while “moving the camera.”

2. Explanation of main function points

function realization idea details
Drag the canvas listening mousedown, mousemove, mouseup Event, calculate the amount of mouse movement, and update the translation value (offsetX, offsetY） Use variables to record the current translation status
scaling canvas listening wheel Scroll event, zoom in or out according to the direction of the scroll wheel, adjust scale scaling Note that when zooming, adjust the offset with the mouse pointer as the center
draw graphics every time draw() When a function is called, based on the current offsetX, offsetY, scale Redraw elements on the canvas To use Canvas before drawing ctx.setTransform() applying a transform
Maintain transition state use ctx.save() and ctx.restore() Method to ensure that the Canvas state is correct every time you draw Avoid transformation and superposition errors

3. Logic combing of core code

A standard rendering process looks like this:

function draw() {
 ctx.save (); //Save the current transformation status
 ctx.setTransform(scale, 0, scale, offsetX, offsetY); //Apply pan and zoom
 ctx.clearRect(-offsetX/scale, -offsetY/scale, canvas.width/scale, canvas.height/scale); //Clear the canvas
 //Draw a figure fixed in world coordinates
 drawAllElements();
 ctx.restore(); //restores transformation state
}
  • scale Control the zoom size.
  • offsetX and offsetY Controls the translation of the canvas.
  • Each drawingBefore, apply zoom and pan transformations before drawing the shape.

When interacting, for example:

  • drag the mouse – Update offsetX/offsetY
  • mouse wheel – Update scale
  • and then call it back draw() redraw

additional details

  • Canvas initialization requires adjustment based on device pixel ratio (DPR) canvas.width and canvas.heightEnsure clear picture quality under the high-scoring screen.
  • When zooming, in order to achievemouse pointerFor the center, you need to use some simple coordinate conversion formulas.

summary

This project can be viewed as:

  • Minimalist whiteboard engine
  • The basics of an interactive 2D editor
  • Practice of understanding Canvas transformation matrices

it justbasic version, but if you want to expand, for example add:

  • Element selection, dragging, deleting
  • Connecting, grouping
  • Multi-person collaboration and synchronization
  • Save and restore canvas content

You can slowly build complex applications like Figma / Miro / Excalidraw!

GitHub：https://github.com/xiaoiver/infinite-canvas-tutorial

Oil tubing:

Scroll to Top