|
|
|
|
|
|
by sidthegeek
2154 days ago
|
|
|
Would someone elaborate on the choice of canvas vs DOM for grids like this? There is this older stackoverflow discussion[1] that seems to indicate that one can get decent performance with large data volumes by maintaining DOM cells for just the viewport area and managing the grid content in response to scroll events. Since the row heights are fixed, the scrolling algorithm should be manageable. So why a canvas rather than DOM? [1] https://stackoverflow.com/questions/2402953/javascript-data-... |
|
|
1. Scroll performance is much better than HTML
2. Drawing on canvas is cheap compared to modifying DOM or attributes
3. Streaming updates are much smoother in canvas as drawing is quick. I had used Canvas as an interface for high-frequency trading
4. Canvas is easy to work with. And with Konva - https://github.com/konvajs/react-konva/, any React developer will find it at home
5. No Browser bugs :)
6. Performance tuning is quicker with Canvas
7. In the future, we can decide to use WebGL (using PixiJS)
Some problems with canvas IMO
1. There is no relative positioning :(. It sounds silly, but coming from HTML, any element can be positioned relative to its parent.
2. Styling/Pixel ratio/Stroke - can be hard to figure out first. And the 0.5px crisp stroke workaround on DPR 1 devices. Took me a long time to figure out
There are pros and cons for both, I guess it all comes down to your personal preference and picking the right tools for the task in hand.