[c-smile]

Well, <canvas> is not the best tool for doing such things.

<canvas> by its definition is essentially an <img> with its content (pixmap) modifiable from script side.

Better solution would be for browser to support immediate mode drawing. Like in my sciter (https://sciter.com) where you can define immediate mode painting methods (Element.paintBackground|Content|Foreground|Outline):

    var elGrid = …

    elGrid.paintBackground = function(gfx) {
      for(var r in ROWS ) 
        gfx.hline(0,r * cellh, width);
      for(var c in COLS ) 
        gfx.vline(c * cellw, 0, height);
    }

That paintBackground callback is invoked as a part of WM_PAINT window handler and with the same Graphics that window uses for rendering the DOM - no intermediate bitmaps.

Such model requires slightly different Graphics architecture than what is used by browsers. At least Path, Brush and TextLayout classes need to be added in order all that to work effectively.

Or to redefine all that on top of WebGL but that will be weird - browsers already have all 2D primitives (Direct2D, Skia, Cairo) implemented natively.