Canvas 2D

// One helper type for code shared by main thread and worker
type Ctx2D =
  | CanvasRenderingContext2D
  | OffscreenCanvasRenderingContext2D;
 
function get2d(canvas: HTMLCanvasElement) {
  const ctx = canvas.getContext("2d");
  if (!ctx) throw new Error("2D canvas unsupported");
  return ctx; // CanvasRenderingContext2D
}

const ctx = get2d(canvas);
const dpr = window.devicePixelRatio || 1;
canvas.width = Math.round(canvas.clientWidth * dpr);
canvas.height = Math.round(canvas.clientHeight * dpr);
ctx.scale(dpr, dpr); // now 1 unit = 1 CSS px

function drawRotated(
  ctx: CanvasRenderingContext2D,
  x: number, y: number, angle: number,
) {
  ctx.save();
  ctx.translate(x, y);
  ctx.rotate(angle);
  ctx.fillRect(-10, -10, 20, 20); // centered on (x, y)
  ctx.restore();
}

ctx.beginPath();
ctx.arc(50, 50, 40, 0, Math.PI * 2);
ctx.fillStyle = "tomato";
ctx.fill();
ctx.lineWidth = 4;
ctx.stroke(); // same path, stroked

const star = new Path2D("M10 0 L13 7 L20 7 L14 12 Z");
const card = new Path2D();
card.roundRect(0, 0, 120, 80, 8);
 
ctx.fill(card);
ctx.stroke(star);
 
canvas.addEventListener("pointerdown", (e) => {
  // Points are in bitmap px, before the transform
  const dpr = window.devicePixelRatio || 1;
  const x = e.offsetX * dpr;
  const y = e.offsetY * dpr;
  if (ctx.isPointInPath(card, x, y)) select("card");
});

// Gradients are in canvas space, not relative to the shape
const lin = ctx.createLinearGradient(0, 0, 200, 0);
lin.addColorStop(0, "#4f46e5");
lin.addColorStop(1, "#06b6d4");
 
const rad = ctx.createRadialGradient(50, 50, 0, 50, 50, 50);
rad.addColorStop(0, "white");
rad.addColorStop(1, "transparent");
 
const cone = ctx.createConicGradient(0, 100, 100);
cone.addColorStop(0, "red");
cone.addColorStop(1, "blue");
 
ctx.fillStyle = lin;
ctx.fillRect(0, 0, 200, 100);

// Patterns repeat any CanvasImageSource
const tile = new OffscreenCanvas(8, 8);
const t = tile.getContext("2d")!;
t.fillRect(0, 0, 4, 4);
const pattern = ctx.createPattern(tile, "repeat");
if (pattern) {
  pattern.setTransform(new DOMMatrix().scale(2));
  ctx.fillStyle = pattern;
}

function fitText(
  ctx: CanvasRenderingContext2D,
  text: string, maxWidth: number,
): string {
  if (ctx.measureText(text).width <= maxWidth) return text;
  let s = text;
  while (s && ctx.measureText(s + "…").width > maxWidth) {
    s = s.slice(0, -1);
  }
  return s + "…";
}

async function loadBitmap(
  url: string,
): Promise<ImageBitmap> {
  const res = await fetch(url);
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  // Decodes off the main thread; no <img> needed
  return createImageBitmap(await res.blob());
}
 
const sprite = await loadBitmap("/sprites.png");
ctx.drawImage(sprite, 0, 0, 32, 32, 100, 100, 64, 64);
sprite.close(); // free GPU memory when done

function grayscale(ctx: CanvasRenderingContext2D) {
  const { width: w, height: h } = ctx.canvas;
  const img = ctx.getImageData(0, 0, w, h);
  const d = img.data;
  for (let i = 0; i < d.length; i += 4) {
    const y = 0.2126 * d[i]! + 0.7152 * d[i + 1]!
      + 0.0722 * d[i + 2]!;
    d[i] = d[i + 1] = d[i + 2] = y;
  }
  ctx.putImageData(img, 0, 0);
}

// Eraser brush
ctx.globalCompositeOperation = "destination-out";
ctx.beginPath();
ctx.arc(x, y, 12, 0, Math.PI * 2);
ctx.fill();
ctx.globalCompositeOperation = "source-over";
 
// CSS filter string (Limited availability: not Safari)
ctx.filter = "blur(4px) saturate(1.5)";
ctx.drawImage(photo, 0, 0);
ctx.filter = "none";

let last = performance.now();
let x = 0;
let rafId = 0;
 
function frame(now: DOMHighResTimeStamp) {
  // Clamp: a backgrounded tab returns a huge delta
  const dt = Math.min((now - last) / 1000, 0.1);
  last = now;
  x = (x + 120 * dt) % ctx.canvas.width; // 120 px/s
 
  ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
  ctx.fillRect(x, 20, 20, 20);
  rafId = requestAnimationFrame(frame);
}
rafId = requestAnimationFrame(frame);
// stop: cancelAnimationFrame(rafId);

const view = document.querySelector("canvas")!;
const off = view.transferControlToOffscreen();
const worker = new Worker(
  new URL("./render.worker.ts", import.meta.url),
  { type: "module" },
);
// OffscreenCanvas is transferable, not copyable
worker.postMessage({ canvas: off }, [off]);

type Init = { canvas: OffscreenCanvas };
 
self.onmessage = (e: MessageEvent<Init>) => {
  const ctx = e.data.canvas.getContext("2d");
  if (!ctx) return;
  const loop = (t: number) => {
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    ctx.fillRect(50 + Math.sin(t / 300) * 40, 40, 20, 20);
    requestAnimationFrame(loop); // rAF works in workers
  };
  requestAnimationFrame(loop);
};

function canvasToBlob(
  canvas: HTMLCanvasElement,
  type = "image/png",
  quality?: number,
): Promise<Blob> {
  return new Promise((resolve, reject) => {
    canvas.toBlob(
      (b) =>
        b ? resolve(b) : reject(new Error("encode failed")),
      type,
      quality,
    );
  });
}

<canvas id="sales" role="img"
  aria-label="Sales rose 40% from January to June">
  <table>…monthly sales…</table>
</canvas>

function setupHiDPI(
  canvas: HTMLCanvasElement,
  opts?: CanvasRenderingContext2DSettings,
): CanvasRenderingContext2D {
  const ctx = canvas.getContext("2d", opts);
  if (!ctx) throw new Error("2D canvas unsupported");
  const dpr = window.devicePixelRatio || 1;
  const rect = canvas.getBoundingClientRect();
  canvas.width = Math.round(rect.width * dpr);
  canvas.height = Math.round(rect.height * dpr);
  ctx.setTransform(dpr, 0, 0, dpr, 0, 0); // CSS px units
  return ctx;
}

function autoResize(
  canvas: HTMLCanvasElement,
  onResize: (w: number, h: number, dpr: number) => void,
): () => void {
  const ro = new ResizeObserver(([entry]) => {
    if (!entry) return;
    const dpr = window.devicePixelRatio || 1;
    const dev = entry.devicePixelContentBoxSize?.[0];
    const css = entry.contentBoxSize[0]!;
    const w = dev?.inlineSize
      ?? Math.round(css.inlineSize * dpr);
    const h = dev?.blockSize
      ?? Math.round(css.blockSize * dpr);
    if (canvas.width === w && canvas.height === h) return;
    canvas.width = w;  // clears + resets state
    canvas.height = h;
    onResize(w, h, dpr); // re-apply transform, redraw
  });
  ro.observe(canvas);
  return () => ro.disconnect();
}

function startLoop(
  update: (dt: number) => void,
  render: (alpha: number) => void,
  step = 1 / 60,
): () => void {
  let acc = 0;
  let last = performance.now();
  let id = 0;
  const frame = (now: number) => {
    acc += Math.min((now - last) / 1000, 0.25);
    last = now;
    while (acc >= step) {
      update(step);
      acc -= step;
    }
    render(acc / step); // 0..1 between states
    id = requestAnimationFrame(frame);
  };
  id = requestAnimationFrame(frame);
  return () => cancelAnimationFrame(id);
}

function lineChart(
  ctx: CanvasRenderingContext2D,
  data: readonly number[], w: number, h: number, pad = 8,
) {
  if (data.length < 2) return;
  const min = Math.min(...data);
  const span = Math.max(...data) - min || 1;
  const sx = (w - pad * 2) / (data.length - 1);
  const sy = (h - pad * 2) / span;
  ctx.clearRect(0, 0, w, h);
  ctx.beginPath();
  data.forEach((v, i) => {
    const x = pad + i * sx;
    const y = h - pad - (v - min) * sy; // y grows down
    if (i === 0) ctx.moveTo(x, y);
    else ctx.lineTo(x, y);
  });
  ctx.lineJoin = "round";
  ctx.lineWidth = 2;
  ctx.strokeStyle = "#2563eb";
  ctx.stroke();
}

function downloadCanvas(
  canvas: HTMLCanvasElement,
  filename = "canvas.png",
) {
  canvas.toBlob((blob) => {
    if (!blob) throw new Error("PNG encode failed");
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = filename;
    a.click();
    setTimeout(() => URL.revokeObjectURL(url), 0);
  }, "image/png");
}