Function paint

app/rcc/scripts/painter/default_template.js:19–212

(ctx, w, h)

// parsed frame (history buffers, smoothing, etc.) before paint() runs.

function paint(ctx, w, h) {
  // Cream paper background + vignette.
  ctx.fillStyle = theme.widget_base;
  ctx.fillRect(0, 0, w, h);

  // Header strip.
  ctx.fillStyle = theme.widget_text;
  ctx.font = "bold 11px sans-serif";
  ctx.textAlign = "start";
  ctx.fillText((group.title || "PAINTER").toUpperCase(), 14, 18);
  ctx.fillStyle = theme.placeholder_text;
  ctx.font = "10px sans-serif";
  ctx.textAlign = "end";
  ctx.fillText("XY  /  Z", w - 14, 18);
  ctx.fillStyle = theme.widget_border;
  ctx.fillRect(14, 22, w - 28, 1);

  if (datasets.length < 2) {
    ctx.fillStyle = theme.placeholder_text;
    ctx.font = "12px sans-serif";
    ctx.textAlign = "center";
    ctx.fillText("Add at least 2 datasets (X, Y) to see the indicator.",
                 w / 2, h / 2);
    return;
  }

  const dsX = datasets[0];
  const dsY = datasets[1];
  const dsZ = datasets.length >= 3 ? datasets[2] : null;

  // Plot card with shadow + border.
  const padL = 50;
  const padR = 132;
  const padT = 38;
  const padB = 38;
  const plotW = Math.max(1, w - padL - padR);
  const plotH = Math.max(1, h - padT - padB);
  const cx    = padL + plotW * 0.5;
  const cy    = padT + plotH * 0.5;

  ctx.fillStyle = theme.widget_border;
  ctx.fillRect(padL + 1, padT + 2, plotW, plotH);
  ctx.fillStyle = theme.alternate_base;
  ctx.fillRect(padL, padT, plotW, plotH);
  ctx.strokeStyle = theme.widget_border;
  ctx.lineWidth = 1;
  ctx.strokeRect(padL + 0.5, padT + 0.5, plotW - 1, plotH - 1);

  // Cross-hair grid.
  ctx.strokeStyle = theme.widget_border;
  ctx.beginPath();
  ctx.moveTo(padL, cy);
  ctx.lineTo(padL + plotW, cy);
  ctx.moveTo(cx, padT);
  ctx.lineTo(cx, padT + plotH);
  ctx.stroke();

  // Quarter divisions (subtle dotted feel via dashed slate ticks).