Use Canvas Layers

Hover without repainting a million points.

Preview

About

One canvas and one draw is right for a virtualized grid and wrong for anything interactive, because hover becomes a dependency of the draw: move the pointer over a Manhattan plot and the entire variant cloud is re-rasterized to move one ring. Layers are declared in paint order, each with its own draw and its own dependency list, so a change to one repaints only that one. Theme tokens are passed in rather than closed over, which is what makes a dark-mode switch repaint every layer instead of leaving a static axis in light-mode colors.

Usage

import { useCanvasLayers } from "@/components/ui/use-canvas-layers"

const { wrapRef, layerProps } = useCanvasLayers({
  height: 240,
  tokens,
  layers: [
    { name: "data",  draw: drawPoints, deps: [hits, x, y] },
    { name: "marks", draw: drawHover,  deps: [hovered] },
  ],
})