Hacker News new | ask | show | jobs
by njtransit 653 days ago
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.
1 comments

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.