Canvas Utilities

The kittl.design.canvas API offers functional tools to render out images or snapshots of your canvas contents, perfect for generating previews or exporting final works programmatically.

Getting a Preview Image

If you need a preview image of a specific board, you can request one via getPreviewImage. It returns a string (e.g. a data URL or hosted asset URL), or null when unavailable.

const previewResult = await kittl.design.canvas.getPreviewImage('board-id');

if (previewResult.isOk && previewResult.result) {
    console.log('Preview URL:', previewResult.result);
}

Taking a Screenshot

You can capture exactly what the user currently sees on the canvas:

const screenshotResult = await kittl.design.canvas.getScreenshot();

if (screenshotResult.isOk) {
    const screenshot = screenshotResult.result;
    console.log(`Screenshot: ${screenshot.width}x${screenshot.height}`, screenshot.data);
}

Getting an Export Blob

For final rendering, use getExport to produce a binary blob. You can target a board or specific nodes, choose a format, and optionally provide sizing hints.

// Export a board as 2x PNG
const pngResult = await kittl.design.canvas.getExport({
    format: 'png',
    target: { boardId: 'board-123' },
    dimensions: { multiplier: 2 },
});

if (pngResult.isOk && pngResult.result) {
    console.log(`PNG blob: ${pngResult.result.size} bytes`);
}

// Export specific nodes as SVG
const svgResult = await kittl.design.canvas.getExport({
    format: 'svg',
    target: { nodeIds: ['node-1', 'node-2'] },
});

// Export with a pixel budget
const jpgResult = await kittl.design.canvas.getExport({
    format: 'jpg',
    target: { boardId: 'board-456' },
    dimensions: { pixelCount: 65_536 },
});

// Export a videoboard as MP4
const mp4Result = await kittl.design.canvas.getExport({
    format: 'mp4',
    target: { boardId: 'videoboard-789' },
});

if (mp4Result.isOk && mp4Result.result) {
    const mp4Blob = mp4Result.result;
    console.log(`MP4 video: ${mp4Blob.size} bytes`);

    // Example: create a download link
    const url = URL.createObjectURL(mp4Blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'export.mp4';
    a.click();
    URL.revokeObjectURL(url);
}

See Canvas API Reference for full parameter details.