This is the archived documentation for Doka Image Editor v7.

Please visit pqina.nl/pintura/docs/ to see documentation for the latest version of Pintura Image Editor.

Loading a blank canvas

We can set the src property to an empty <canvas> element to load a new blank image.

import { openDefaultEditor } from './doka.js';

// Create a new image canvas
const image = document.createElement('canvas');
image.width = 1024;
image.height = 768;

// The default <canvas> is transparent, let's make it white
const imageContext = image.getContext('2d');
imageContext.fillStyle = 'white';
imageContext.fillRect(0, 0, image.width, image.height);

// Open the default image editor in a modal
const editor = openDefaultEditor({
    src: image,
});

// Show resulting image preview
editor.on('process', ({ dest }) => {
    const preview = new Image();
    preview.src = URL.createObjectURL(dest);
    document.body.appendChild(preview);
});