In Part 1 we introduced the idea of an infinite canvas. Here we focus on the camera (viewport).
Camera and viewport
The camera determines which part of the world is visible and at what zoom. With @ue-too/board, you get:
- Default controls: space+drag to pan, Ctrl+scroll to zoom, pinch on touch devices.
- Programmatic control:
board.getCameraRig().panToWorld({ x, y }),setZoom(), and coordinate helpers likescreenToWorld/worldToScreen.
Use board.step(timestamp) in your render loop so the camera transform is applied before you draw. Everything you draw with board.context after that is in world space and will pan and zoom with the view.
That’s the core. Next we could add hit-testing, layers, or persistence—pick one and build from here.