Build an Infinite Canvas(infinitecanvas.cc)
infinitecanvas.cc
Build an Infinite Canvas
https://infinitecanvas.cc/
11 comments
Infinite canvas is for me the new UX paradigm that could dominate the next years to come. Just seeing how natural Miro is used for all kinds of document creation is the moment it made click in my head.
> new UX paradigm
I just felt a great disturbance in the force as a billion users shuddered in fear simultaneously.
I just felt a great disturbance in the force as a billion users shuddered in fear simultaneously.
It's great that you've found something you enjoy, but do note that the experience isn't universally beloved. Personally, I find infinite-canvas-style editors and documents totally unparseable and tedious to navigate compared to something hierarchical or flat. I theorize that the difference in preference has something to do with how different individuals use spacial ideas to map concepts, but it could be a simple matter of familiarity.
The only way an infinite canvas makes sense is if the diagram guides the user. You can’t rely on simply going to the next page anymore, so it does take some extra effort to get it right.
This is a superb introduction in the intricacies involved with implementing an infinite canvas from scratch. Reading through it, I'm really glad that when I wrote my canvas library I made a decision to avoid WebGL/WebGpu at all costs - though mature libraries that make heavy/exclusive use of such tech clearly demonstrate the benefits.
Looking forward to future instalments!
Looking forward to future instalments!
While this is really cool, you're essentially re-implementing the browser if you take this route. If you're ok only rendering in the browser, you can easily implement an infinite canvas using the normal DOM (including normal HTML elements and SVGs) and the CSS transform attribute. With a few tricks, you can even make it performant when using React.
I'm not actually convinced the DOM can handle this. I've tried using native javascript and it worked, but the canvas was much smoother
I have a relatively naive implementation of an infinite canvas in React (which is a very slow library). The implementation is exactly 161 lines of code (including white space, imports, etc.). On my laptop, my implementation visibly starts to drop frames around 10,000 elements. The linked implementation starts to visibly drop frames at 20,000 elements. I'm leaving a lot of performance on the table, e.g. I don't have a culling equivalent and my DOM structure causes hit testing to be the bottleneck, which is solvable. What I'm able to render is much richer than a canvas, because of full HTML/CSS support. It's definitely possible, but you have to be willing to sit down with the profiler to understand what your bottlenecks are.
The webgl renderer in lesson 1 does not seem to work in Chromium/Firefox on Linux.
Looks pretty cool. "Lesson 011 - Draw polyline" returns 404 though.
looks cool! this is the topic i was curious about for a while, thanks for the demonstration.
nit: lesson 001 has a figure with Chinese characters while the page is English.
nit: lesson 001 has a figure with Chinese characters while the page is English.