Sure. Input elements are still HTML FYI, we dont use canvas to simulate that.
I have been working with DataGrids for more than 4-5 years. So I consider myself at a position to compare HTML and Canvas performance
We went with Canvas because of the following reasons
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 https://konvajs.org/, any React developer will find it at home
5. No more 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
I wish you best of luck. I understand your decision to go with canvas. I have experimented with canvas quite a bit as well, as I could not get HTML DOM performance quite right initially.
How I solved this for DataGridXL:
Only columns are DOM nodes. Rows are not actually nodes, but values are spaced vertically using CSS and with a simple newline (\n) character in between. The grid lines are just that: they're grid lines that are repositioned using CSS animation when the user is scrolling.
This means that when a user is scrolling, the DOM does not have to update by, let's say 20 rows x 10 columns = 200 DOM nodes. Only 10 column DOM nodes need to be redrawn.
That's how DGXL works with DOM & HTML but is still in many cases faster than a canvas implementation. Plus it still is accessible. Try zooming the page or use CTRL+F. You can find and select any (visible) value inside the data grid. No problems there.
Interesting. Wonder how you can get cell level control for styling when you are rendering text nodes. Positioning elements by line-height may not be the best way.
Canvas can be made fully accessible and screen reader friendly. See how Google Sheets has done. But yes, its not natively accessible like HTML.
That's why I try to make it clear that DGXL is meant for input, editing values. It's not meant for templating or making tables look all pretty for presentation means.
It was a tough decision I had to make, but in the end I am very happy with it. If people are looking for a data table with 100+ features (including markup), I will gladly refer them to 100 other products. But if they're looking for performance & reliability, I am quite convinced that DGXL is the best choice really.
