Build an Infinite Canvas
infinitecanvas.cc
Build an Infinite Canvas
1–10 of 12 posts
Re: Build an Infinite Canvas
#2Looks pretty cool. "Lesson 011 - Draw polyline" returns 404 though.
Re: Build an Infinite Canvas
#3Infinite 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.
Re: Build an Infinite Canvas
#4looks 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.
Re: Build an Infinite Canvas
#5Infinite 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.
Re: Build an Infinite Canvas
#6Infinite 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.
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.
Re: Build an Infinite Canvas
#7While 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.
Re: Build an Infinite Canvas
#8Infinite 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.
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 matt…
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.
Re: Build an Infinite Canvas
#9While 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
Re: Build an Infinite Canvas
#10This 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!