Create From HTMLCanvas

You can capture any graphics rendered to a canvas—2D drawings, WebGL content, or programmatically generated visuals—and use them as the starting point for editing in CE.SDK. The workflow extracts canvas content as a data URL and passes it to the scene API.

import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js';
import packageJson from './package.json';

class Example implements EditorPlugin {
  name = packageJson.name;
  version = packageJson.version;

  async initialize({ cesdk }: EditorPluginContext): Promise<void> {
    if (cesdk == null) {
      throw new Error('CE.SDK instance is required for this plugin');
    }

    const engine = cesdk.engine;

    const canvas = document.createElement('canvas');
    canvas.width = 512;
    canvas.height = 512;

    const ctx = canvas.getContext('2d');
    if (ctx == null) {
      throw new Error('Could not get 2D context');
    }

    // Draw a gradient background
    const gradient = ctx.createLinearGradient(0, 0, 512, 512);
    gradient.addColorStop(0, '#4158D0');
    gradient.addColorStop(0.5, '#C850C0');
    gradient.addColorStop(1, '#FFCC70');
    ctx.fillStyle = gradient;
    ctx.fillRect(0, 0, 512, 512);

    // Draw "img.ly" text
    ctx.fillStyle = '#FFFFFF';
    ctx.font = 'bold 72px Arial, sans-serif';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText('img.ly', 256, 256);

    const dataURL = canvas.toDataURL();

    // Second parameter is DPI: 72 for screen, 300 for print (default)
    await engine.scene.createFromImage(dataURL);

    // Enable auto-fit zoom on the page
    const pages = engine.block.findByType('page');
    if (pages.length > 0) {
      engine.scene.enableZoomAutoFit(pages[0], 'Both', 40, 40, 40, 40);
    }
  }
}

export default Example;

This guide covers how to create a canvas element, draw content to it, extract that content as a data URL, and create an editable CE.SDK scene from the result.

Create the Canvas#

Start by creating a canvas element with specific dimensions. These dimensions determine the resulting scene size.

const canvas = document.createElement('canvas');
canvas.width = 512;
canvas.height = 512;

The canvas width and height attributes set the actual pixel dimensions, not CSS styling.

Get the Drawing Context#

Obtain the 2D rendering context from the canvas to draw content.

const ctx = canvas.getContext('2d');
if (ctx == null) {
  throw new Error('Could not get 2D context');
}

Use the context to render any graphics—2D drawings, chart visualizations, or programmatic visuals.

Extract as Data URL#

Extract the canvas content as a base64-encoded data URL using toDataURL().

const dataURL = canvas.toDataURL();

The default format is PNG. For JPEG with compression, use canvas.toDataURL('image/jpeg', 0.9).

Create Scene from Data URL#

Pass the data URL to engine.scene.createFromImage() to create an editable scene. The page dimensions automatically match the source image.

// Second parameter is DPI: 72 for screen, 300 for print (default)
await engine.scene.createFromImage(dataURL);

The second parameter controls DPI: use 72 for screen display or 300 (default) for print output.

Common Canvas Sources#

The createFromImage() method accepts any valid image data URL, making it compatible with various canvas sources:

• Chart Libraries — D3.js, Chart.js, and Plotly render visualizations to canvas
• WebGL Content — 3D renders, games, and complex visualizations
• Drawing Applications — Capture user-created sketches and annotations
• QR Code Generators — Libraries like qrcode.js render directly to canvas
• Generative Art — p5.js and Processing.js output to canvas elements
• Video Frames — Draw video frames to canvas with drawImage(video, 0, 0)

Each source follows the same pattern: render to canvas, extract with toDataURL(), and pass to CE.SDK.

Troubleshooting#

Canvas content not appearing

Verify the canvas has content before calling toDataURL(). Async rendering can produce blank exports. For WebGL canvases, set preserveDrawingBuffer: true in the context options.

Tainted canvas errors

Cross-origin images drawn to the canvas taint it, preventing toDataURL() calls. Use crossOrigin="anonymous" when loading images, and ensure the server sends proper CORS headers.

Scene dimensions incorrect

Canvas width and height attributes determine the actual pixel dimensions, not CSS styling. The data URL captures attribute dimensions, not the displayed size.

WebGL context lost

WebGL contexts can be lost due to GPU resource limits. Listen for the webglcontextlost event and handle gracefully by recreating the context or notifying the user.

API Reference#

Next Steps#

Create From Image shows how to load scenes from image URLs directly.

Start With Blank Canvas covers starting with an empty scene for new designs.

Save a Scene explains how to save your edited scene for later use.

Load a Scene demonstrates loading previously saved scenes.