Rendering 100k Rows: How Far Can the DOM Go? (Part 3: Canvas Grids) // MANOJ MOHAN

Welcome to Part 3 of our series, "Rendering 100k Rows: How Far Can the DOM Go?"

In Part 2, we explored DOM Virtualization, a technique that recycles HTML nodes to render thousands of items smoothly. This works wonders for single-column lists or simple tables, but what happens when your data grows in both dimensions?

Imagine building a massive spreadsheet with 100 columns and 100,000 rows (10 million total cells). If the user scrolls diagonally or resizes columns, even a virtualized grid must coordinate thousands of active DOM operations in real time, leading to noticeable frame drops and lag.

To cross this multi-dimensional performance barrier, high-performance tools like Google Sheets, Airtable, and Figma abandon HTML nodes entirely. Instead, they draw their interfaces on an HTML5 Canvas.

Why Canvas? The Power of a Single DOM Node

An HTML5 Canvas is essentially a blank graphic image container. No matter how complex your grid is, the browser's DOM tree only sees one single element:

<canvas id="grid-canvas"></canvas>

Instead of letting the browser calculate layouts and paint elements automatically, we write JavaScript instructions to paint pixels directly onto this 2D graphic context using the Canvas API (ctx.fillText, ctx.fillRect, ctx.strokeRect).

Since there are no DOM nodes to update, style recalculations, reflows, and layout cycles drop to zero. The rendering speed is limited only by how fast your GPU can paint pixels.

Visualizing Coordinate Math: Hover Event Mapping

Because a Canvas is just a flat image, it has no native concept of cells, click handlers, or hover states.

If a user clicks the canvas, the browser only provides the pixel coordinates (e.g., clientX = 220, clientY = 65). We must write the math to map those pixels back to our database row and column indexes.

Hover your cursor over the visualizer below to see how coordinate mapping calculates the active row and column in real time:

Row = Math.floor(MouseY / RowHeight)
Column = Math.floor(MouseX / ColumnWidth)

Interactive Coordinate Mapper

    Mouse X/Y: 0, 0
    Mapped Cell: None
  

Interactive Demo: Simple Canvas Grid

Below is a working implementation of a table rendering 10,000 records on a Canvas.

Open the editor (click Edit Code), and view how the scrolling and drawing cycle performs at 60fps using requestAnimationFrame.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <style>
    body {
      font-family: system-ui, -apple-system, sans-serif;
      background: #0f172a;
      color: #f1f5f9;
      padding: 1rem;
      margin: 0;
    }
    .grid-container {
      position: relative;
      background: #1e293b;
      border: 1px solid #334155;
      border-radius: 8px;
      overflow: hidden;
      display: flex;
    }
    canvas {
      flex: 1;
      width: 100%;
      display: block;
      cursor: default;
    }
    .scrollbar-y {
      width: 12px;
      background: #0f172a;
      position: relative;
      cursor: pointer;
    }
    .scrollbar-handle {
      position: absolute;
      width: 8px;
      left: 2px;
      background: #3b82f6;
      border-radius: 4px;
    }
    .stats-bar {
      margin-top: 0.5rem;
      font-size: 0.75rem;
      color: #94a3b8;
    }
  </style>
</head>
<body>

<h3>Canvas-Based Grid Demo</h3>
  
  <div class="grid-container" id="container">
    <canvas id="grid" height="300"></canvas>
    <div class="scrollbar-y" id="scrollbar">
      <div class="scrollbar-handle" id="handle"></div>
    </div>
  </div>

<div class="stats-bar">
    <span>Mounted DOM elements inside Grid: <strong>0</strong> (Single Canvas Element)</span>
  </div>

const totalRows = 10000;
    const rowHeight = 30;
    const totalHeight = totalRows * rowHeight;
    const viewportHeight = canvas.height;
    
    let scrollY = 0;

// Generate mock database rows
    function getRowData(index) {
      return [
        `#${index + 1}`,
        `Canvas Record ${index + 1}`,
        `Active status: ID-${1000 + (index % 5)}`
      ];
    }

// Scroll calculations
    const maxScroll = totalHeight - viewportHeight;
    
    function updateScrollbar() {
      const pct = scrollY / maxScroll;
      const handleH = Math.max(20, (viewportHeight / totalHeight) * viewportHeight);
      const trackH = scrollbar.clientHeight;
      const handleY = pct * (trackH - handleH);
      
      handle.style.height = `${handleH}px`;
      handle.style.top = `${handleY}px`;
    }

// Mouse scroll listener
    container.addEventListener('wheel', (e) => {
      e.preventDefault();
      scrollY = Math.max(0, Math.min(maxScroll, scrollY + e.deltaY));
      requestAnimationFrame(draw);
    });

// Drag scrollbar listener
    let isDragging = false;
    let startDragY = 0;
    let startScrollY = 0;

scrollbar.addEventListener('mousedown', (e) => {
      isDragging = true;
      startDragY = e.clientY;
      startScrollY = scrollY;
      document.body.style.userSelect = 'none';
    });

window.addEventListener('mousemove', (e) => {
      if (!isDragging) return;
      const deltaY = e.clientY - startDragY;
      const trackH = scrollbar.clientHeight;
      const handleH = handle.clientHeight;
      const scrollPct = deltaY / (trackH - handleH);
      
      scrollY = Math.max(0, Math.min(maxScroll, startScrollY + scrollPct * maxScroll));
      requestAnimationFrame(draw);
    });

window.addEventListener('mouseup', () => {
      isDragging = false;
      document.body.style.userSelect = 'auto';
    });

// Handle canvas width responsive updates
    function resizeCanvas() {
      canvas.width = container.clientWidth - scrollbar.clientWidth;
      draw();
    }
    window.addEventListener('resize', resizeCanvas);
    
    // Initial load
    resizeCanvas();
  </script>
</body>
</html>

The Canvas Trade-off: Performance vs. Complexity

While Canvas offers absolute rendering performance, it is a double-edged sword. By bypassing the DOM, you lose basic features that the browser normally handles for free:

Text Overflow & Wrapping: Canvas does not wrap text. If a cell contains a long sentence, you must write JS logic to measure the text width (ctx.measureText) and break it into substrings.
Scroll Offsets & Events: You must build and handle scrollbars yourself by listening to mouse wheel events (wheel) and touch scroll gestures, calculating drawing offsets, and manually triggering redraw frames.
Accessibility (a11y): Screen readers cannot read pixels painted on a canvas. You must construct a hidden, overlaying HTML table containing ARIA labels that duplicates the data structure so assistive tools can navigate.
No Native Selection or Copy-Paste: Users cannot click and drag to highlight text or use Ctrl+C/Cmd+C to copy text from cells. To support copy-paste, you must track selection coordinates in JS and manually write text to the Clipboard API.
Goodbye, CSS Styling: You lose hover effects, focus rings, border-radius, fonts, and transitions. All visual styles, spacing, and hover cues must be rendered manually using imperative canvas commands in JavaScript.
SEO & Indexability: Search engines cannot parse or index the data rendered inside a Canvas. It is completely invisible to SEO.
High-DPI / Retina Blurriness: A basic Canvas context ignores high-resolution screen scales, resulting in blurry text and pixelated lines. Developers must scale the Canvas dimensions manually using window.devicePixelRatio and apply a scale transform.

Summary: When to choose Canvas

HTML5 Canvas Grids are the ultimate solution when you need:

Sub-millisecond rendering loops for high-frequency or real-time data feeds.
Dense spreadsheets containing millions of individual cells.
Advanced graphic layouts (like nested hierarchies or canvas-drawn graphics).

If you are only building a standard table with a few hundred columns and don't need real-time formula computation or cell pixel selections, virtualization will offer a simpler design workflow.

In Part 4, we will conclude the series by building a complete benchmark shootout comparing Pagination, DOM Virtualization, and Canvas Grids side-by-side. Stay tuned!