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:

1. How is canvas able to be so much more effective than the virtual DOM elements technique?
2. 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?
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?

Thanks.

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:

1. How is canvas able to be so much more effective than the virtual DOM elements technique?
2. 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?
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?

Thanks.

• javascript
• html
• canvas
• google-docs

• As of July/2015 there is an open source example. See my answer below. – Marcelo Glasberg Commented Jul 22, 2015 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 Commented Jul 28, 2015 at 5:50
• Do check github.com/myliang/x-spreadsheet – giridhar Commented May 14, 2021 at 15:47

5 Answers 5

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

I can only answer one of your questions for sure:

1. 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.

2. 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%

3. I'm pretty sure there is no such thing done already, but I can't tell for sure.

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!

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'}
]

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