Infinite canvas implementation akin to figma (but without webGL. That'll be done here).
This repository has branches for each major milestone for implementing the infinite canvas:
- basic-canvas
- canvas-class: refactors the basic canvas in preparation to encapsulate complex coordinate system
- canvas-zoom: Adds zooming via scroll
- infinite-canvas: Adds "dragging around" by holding space and clicking.
Master has a few more bells and wistles, namely it has clickable links which are made up of two shapes along with a rudimentary collision system.
It seemed like a trend to make an app with an infinite canvas, so I wanted to try to make one myself. I'm thinking about making an app of my own using an infinite canvas and while I could have made it directly with something like PixiJS, I wanted to first try making it in vanillaJS.
That being said, I did use typescript and vite just to make my development experience better, but neither are necessary. Stripping them out would be trivial.
Important TODO
- Touch controls (pinch for zoom out etc)
TODO, maybe
- Occlusion culling?
- Text highlighting?