Convert coordinates

Surface bounds and input coordinates are CSS pixels.

const point = runtime.clientToCanvasPoint(event.clientX, event.clientY);

Direct drawing with ctx inside onPaint() uses backing-store pixels. Use runtime helpers when you mix surface drawing with raw canvas drawing:

runtime.onPaint(({ ctx, drawSurface }) => {
  drawSurface(surface);

  const size = runtime.cssLengthToCanvasPixels(24);
  ctx.fillRect(0, 0, size, size);
});

Keep this boundary explicit:

• surface bounds: CSS pixels
• pointer/client conversion: CSS pixels
• direct ctx drawing: backing-store pixels