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:

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.

Answer 1

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