Infinite Canvas (demo)#

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.

Why make this?#

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)