Canvas Timeline
Function

useTimelineCanvasLayer

Wires an app-owned canvas to timeline geometry and redraw events. Drawing is imperative and scheduled through requestAnimationFrame so dense visual layers do not push scroll or zoom updates through React state.

Signature

Type Definition
useTimelineCanvasLayer(canvasRef: RefObject<HTMLCanvasElement | null>, options: UseTimelineCanvasLayerOptions<TrackKind>): TimelineCanvasLayerHandle

Type parameters

NameConstraintDefaultDescription
TrackKindNonestringApp-defined track kind values carried by draw geometry.

Parameters

NameTypeDescription
canvasRefRefObject<HTMLCanvasElement | null>Ref for the app-owned canvas element to size and draw.
optionsUseTimelineCanvasLayerOptions<TrackKind>Drawing callback, geometry overrides, and redraw behavior.

Returns

TimelineCanvasLayerHandle

Imperative handle for manually scheduling redraws.

Examples

tsx Example
import { useRef } from 'react';
import { useTimelineCanvasLayer } from '@techsquidtv/canvas-timeline-renderer';


export function WaveformLayer() {
  const canvasRef = useRef<HTMLCanvasElement>(null);


  useTimelineCanvasLayer(canvasRef, {
    overscanPixels: 240,
    draw: ({ ctx, visibleClips }) => {
      ctx.fillStyle = 'rgba(20, 184, 166, 0.35)';


      for (const entry of visibleClips) {
        ctx.fillRect(entry.x, entry.y + entry.height / 2, entry.width, 2);
      }
    },
  });


  return <canvas ref={canvasRef} className="timeline-custom-canvas-layer" />;
}

Related links