Skip to main content

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', {
    targetPixelCount: 65_536, // Desired total pixel count (width × height)
});

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.