82 Coordinate-space Conversion. 82 of 95.
82/CAMERA BEHAVIOR/82 of 95
Coordinate-space Conversion
Screen pixels are not canvas units.
Best experienced with a pointer.
The problem
Clicks land in the wrong place once the canvas is panned or zoomed, because screen pixels were treated as world coordinates.
The solution
Inverse transforms map screen points into the correct world coordinate system.
Experiment
Play with the values
1.5
40px
30px
How it works
- The pointer is captured in screen pixels, which is not the canvas's coordinate system.
- The canvas origin is subtracted so the point is local to the surface.
- The inverse of the current pan and zoom converts that point into world units.
- The result is a world coordinate that stays stable when the camera moves.
- Markers and objects are placed in world space, so they stick to the content rather than the screen.
Seen in
Design canvases
Figma-style boards convert pointer hits into artboard space under zoom and pan.
Whiteboard tools
Sticky notes and strokes land where the cursor intends after camera moves.
Map editors
Feature placement uses geographic or tile world coords, not raw client pixels.
Game viewports
Click-to-select converts screen taps into world positions under a moving camera.