Editable grid using html Canvas

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

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

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.