Usage notes
`TimelineCanvasLayer` renders an absolutely positioned, pointer-transparent
canvas and wires it to timeline redraws through useTimelineCanvasLayer.
Place it inside the same viewport stack as the primary renderer for overlays
such as waveforms, transcript highlights, loudness meters, or clip analysis
bands that should stay aligned with scroll and zoom.
Signature
TimelineCanvasLayer: ForwardRefExoticComponent<TimelineCanvasLayerProps<string> & RefAttributes<HTMLCanvasElement>>Examples
import { TimelineCanvasLayer } from '@techsquidtv/canvas-timeline-renderer';
export function LoudnessOverlay() { return ( <TimelineCanvasLayer overscanPixels={320} draw={({ ctx, visibleClips }) => { ctx.fillStyle = 'rgba(245, 158, 11, 0.3)';
for (const entry of visibleClips) { ctx.fillRect(entry.x, entry.y + entry.height - 8, entry.width, 4); } }} /> );}