How We Made PNG Export More Responsive in Strokeline

Description and use

Strokeline’s PNG export became more responsive by batching rendering, yielding between batches, capping output size, and using canvas.toBlob() to avoid large base64 strings.

Problem

Exporting a large scene as a PNG caused a single click to trigger long main‑thread work, freezing the page.

Outcome

The export became more responsive: rendering is cooperative, progress is reported, cancellation is possible, output size is capped, and memory usage is reduced by avoiding base64 strings.

Workflow

• Compile and validate the current script
• Select the active scene and clamp playhead time
• Preload images and handwritten font
• Resolve the timeline into the state for that time
• Draw the scene to a canvas in batches of four nodes, yielding between batches
• Encode the canvas as a PNG Blob with canvas.toBlob()
• Download the Blob as a file

Evidence

Previously, the snapshot path drew all visible scene nodes in one synchronous pass.

The first improvement is to render in batches of four nodes. Between batches the renderer yields using requestAnimationFrame (or a timer fallback).

Canvas memory use grows with the number of output pixels. Strokeline now exports at 1× scale by default, caps the PNG at 4 million pixels, and also limits either output dimension to 8192 pixels.

After drawing, the exporter uses canvas.toBlob() and downloads the resulting PNG Blob. This avoids creating a large base64-encoded string as an intermediate representation.