v8.88.3

Loading an empty canvas

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

<!DOCTYPE html>

<head>
    <link rel="stylesheet" href="./pintura.css" />
</head>

<style>
    .pintura-editor {
        height: 600px;
    }
</style>

<button type="button" id="buttonNewImage">Load new image</button>

<div id="editor"></div>

<script type="module">
    import { appendDefaultEditor } from './pintura.js';

    const buttonNewImage = document.querySelector('#buttonNewImage');

    const editor = appendDefaultEditor('#editor', { imageCropAspectRatio: 1 });

    buttonNewImage.addEventListener('click', () => {
        // 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);

        // Set editor source to the canvas
        editor.src = image;
    });
</script>