Function render

web/js/sparse_track_editor.js:624–715

(node)

}

function render(node) {
  const ed = node._ed;
  const ctx = ed.ctx;
  const c = ed.canvas;

  ctx.clearRect(0, 0, c.width, c.height);

  // Background image
  if (ed.bgImg) {
    const s = getScale(node);
    ctx.globalAlpha = 0.85;
    ctx.drawImage(ed.bgImg, 0, 0, ed.imgW * s, ed.imgH * s);
    ctx.globalAlpha = 1.0;
  }

  const samplesW = node.widgets.find((w) => w.name === "points_to_sample");
  const numSamples = samplesW ? samplesW.value : 121;
  const dpr = window.devicePixelRatio || 1;

  // Draw each spline
  for (let si = 0; si < ed.splines.length; si++) {
    const isActive = si === ed.active;
    const color = SPLINE_COLORS[si % SPLINE_COLORS.length];
    const spline = ed.splines[si];

    // Interpolated curve
    if (spline.length >= 2) {
      const curve = interpolateSpline(spline, Math.max(numSamples, 60));
      ctx.beginPath();
      const p0 = imgToCanvas(node, curve[0]);
      ctx.moveTo(p0.x, p0.y);
      for (let i = 1; i < curve.length; i++) {
        const p = imgToCanvas(node, curve[i]);
        ctx.lineTo(p.x, p.y);
      }
      ctx.strokeStyle = color;
      ctx.lineWidth = (isActive ? CURVE_LINE_WIDTH * 1.4 : CURVE_LINE_WIDTH) * dpr;
      ctx.globalAlpha = isActive ? 1.0 : 0.5;
      ctx.stroke();
      ctx.globalAlpha = 1.0;
    }

    // Control points
    for (let pi = 0; pi < spline.length; pi++) {
      const cp = imgToCanvas(node, spline[pi]);
      const isHov = ed.hover && ed.hover.si === si && ed.hover.pi === pi;
      const isDrag = ed.drag && ed.drag.si === si && ed.drag.pi === pi;
      const baseR =
        isHov || isDrag
          ? ACTIVE_POINT_RADIUS
          : isActive
            ? POINT_RADIUS
            : POINT_RADIUS * 0.8;
      const r = baseR * dpr;

      // Outer ring
      ctx.beginPath();
      ctx.arc(cp.x, cp.y, r + 2 * dpr, 0, Math.PI * 2);