Editable grid using html Canvas

Question

I was recently very surprised when I noticed that in the latest iteration of Google Spreadsheets they are rendering the spreadsheet grid using a canvas tag, whereas in the past they used the tried and true <table><tr><td> to render the grid.

In the previous version only a fraction of actual rows are rendered at any one point in time using a virtual rows technique (similar to what's done in slickgrid). Which gives pretty good performance (slickgrid has a demo of 500,000 rows).

My Questions:

How is canvas able to be so much more effective than the virtual DOM elements technique?
When working with canvas in this fashion, how could one ensure the canvas renders at the same speed as scrolling, since unlike the virtual rows technique there is no pre-rendered buffer?
Does anyone know of an open source example using html canvas to create an editable grid, or any other code example that accomplishes something similar?

Thanks.

As of July/2015 there is an open source example. See my answer below. — Marcelo Glasberg, Jul 22 '15 at 20:52
Just a P.S.- I ended up (June '14) creating my own really simple [closed source :(] read-only grid with sort and drag and drop capabilities. I only mention it because it's not so hard to do. It has fixed row height- so I just made a an empty div with full height to get the scroll bar. I listen for a (throttled) scroll event and recreate the canvas each time, based on calculation of which rows to show. Drawing the canvas is really fast <50ms. For D&D I overlay canvas rows with div's. I then listen for drag events on those rows and associate it with real data. But now that I see hypergrid... — Danny C, Jul 28 '15 at 05:50

score 7 · Accepted Answer · edited Apr 05 '19 at 13:26

7

To answer your question 3: Does anyone know of an open source example using html canvas to create an editable grid, or any other code example that accomplishes something similar?

Yes: Hypergrid. It's open source. It uses canvas and Google's Polymer. Have a look:

Hypergrid demo

Hypergrid in Github

edited Apr 05 '19 at 13:26

snrlx

4,987
2
27
34

answered Jul 22 '15 at 20:48

Marcelo Glasberg

29,013
23
109
133

1

Wow! That demo is pretty phenomenal. Pushing the boundaries of what thought possible. Thanks for adding the link. – Danny C Jul 28 '15 at 05:38

score 5 · Answer 2 · answered Jun 18 '14 at 14:35

I can only answer one of your questions for sure:

Drawing on a Canvas is a simple process, it's just a simple big old bunch of colored bits. On the other hand DOM Elements have much more things like event handlers, mouse interactivity etc. All this sums up and makes DOM elements way heavier than just drawing on a canvas.
There are quite some techniques for this, one of them is drawing onto an offscreen canvas then copy the relevant portions via putImageData. This is mostly combined with requestAnimationFrame so you just draw whenever the browser requests that. As I said I can not answer this 100%
I'm pretty sure there is no such thing done already, but I can't tell for sure.

score 2 · Answer 3 · answered Jun 18 '14 at 14:43

How can canvas be more effective at displaying a spreadsheet than using a DOM table?

Canvas is a write-only element so it has much less overhead than read-write elements. After you've drawn the visible portion of the spreadsheet on the canvas the canvas does not "remember" where it put the pixels.

Is canvas able to keep up with spreadsheet navigation (scrolling, etc)

You can display a large spreadsheet with scrollbars by creating a very large canvas element and wrapping the canvas in a smaller div element with the div set to overflow:scroll.

Also, Canvas is very fast and might be able to scroll & redraw a dynamically created spreadsheet. Canvas actually is natively double buffered and also uses any available GPU to speed drawings. If more speed is necessary you programmatically create additional "memory only" canvases which can be quickly drawn to the on-screen canvas as needed.

Do you know of any canvas based editable spreadsheets.

No, I don't know of any.

Canvas is write-only. A canvas spreadsheet becomes editable only with great programming effort. So canvas is probably the wrong tool for editing.

Chuckle...seems as I was typing my response Alexander Kludt was responding similarly--Ditto what he says!

Thanks. Like you said to make the canvas completely interactive and editable requires a whole lot of work. It's not an obvious choice for something for this scale. But I guess that same simplicity is what allows it to be so fast. I wonder if we are going to see more canvas based "fake" DOM UI in the near future. — Danny C, Jun 18 '14 at 15:53
Native Canvas UX is growing in popularity as it takes market share from Flash (r.i.p Flash). However, canvas based text input will likely not replace DOM text-inputs. Cheers! — markE, Jun 18 '14 at 18:48

score 2 · Answer 4 · answered Apr 05 '19 at 14:09

For people looking for another easy-to-use alternative that is quite similar to Hypergrid, take a look at: Canvas Datagrid

It is usable with only a few lines of code:

var container = document.getElementById('container')
var dataGrid = canvasDatagrid({
  parentNode: container
})

dataGrid.data = [
  {col1: 'row 1 column 1', col2: 'row 1 column 2', col3: 'row 1 column 3'},
  {col1: 'row 2 column 1', col2: 'row 2 column 2', col3: 'row 2 column 3'}
]

score -2 · Answer 5 · answered Feb 04 '15 at 19:37

-2

FYI, Google Docs/Drive Spreadsheet uses canvas for the main spreadsheet/table display.

answered Feb 04 '15 at 19:37

xski

162
3

3

The OP's first sentence was "I noticed that in the latest iteration of Google Spreadsheets they are rendering the spreadsheet grid using a canvas tag". – opyate Jun 15 '15 at 07:45

Editable grid using html Canvas

5 Answers5