Loading an empty canvas

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

index.html

<!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>

App.jsx
App.css

import '@pqina/pintura/pintura.css';
import './App.css';
import { useState } from 'react';
import { PinturaEditor } from '@pqina/react-pintura';
import { getEditorDefaults } from '@pqina/pintura';

const editorDefaults = getEditorDefaults();

function App() {
    const [editorSrc, setEditorSrc] = useState(undefined);

    const handleButtonClick = () => {
        // 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
        setEditorSrc(image);
    };

    return (
        <div className="App">
            <button type="button" onClick={handleButtonClick}>
                Load new image
            </button>

            <PinturaEditor
                {...editorDefaults}
                src={editorSrc}
                imageCropAspectRatio={1}
            />
        </div>
    );
}

export default App;

.pintura-editor {
    height: 600px;
}

App.vue

<template>
    <div>
        <button type="button" v-on:click="handleButtonClick($event)">
            Load new image
        </button>

        <PinturaEditor
            v-bind="editorDefaults"
            :src="editorSrc"
            :imageCropAspectRatio="1"
        />
    </div>
</template>
<script>
import { PinturaEditor } from '@pqina/vue-pintura';
import { getEditorDefaults } from '@pqina/pintura';

export default {
    name: 'App',

    components: {
        PinturaEditor,
    },

    data() {
        return {
            editorDefaults: getEditorDefaults(),

            editorSrc: undefined,
        };
    },

    methods: {
        handleButtonClick: function () {
            // 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
            this.editorSrc = image;
        },
    },
};
</script>
<style>
@import '@pqina/pintura/pintura.css';

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

App.svelte

<script>
    import { PinturaEditor } from '@pqina/svelte-pintura';
    import { getEditorDefaults } from '@pqina/pintura';
    import '@pqina/pintura/pintura.css';

    let editorDefaults = getEditorDefaults();

    let editorSrc = undefined;

    const handleButtonClick = () => {
        // 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
        editorSrc = image;
    };
</script>

<div>
    <button type="button" on:click={handleButtonClick}>Load new image</button>

    <PinturaEditor
        {...editorDefaults}
        src={editorSrc}
        imageCropAspectRatio={1}
    />
</div>

<style>
    div :global(.pintura-editor) {
        height: 600px;
    }
</style>

import { Component, ViewChild } from '@angular/core';

import { getEditorDefaults } from '@pqina/pintura';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})
export class AppComponent {
    @ViewChild('buttonNewImage') buttonNewImage?: any;

    editorDefaults: any = getEditorDefaults();

    editorSrc?: HTMLCanvasElement = undefined;

    handleButtonClick(): void {
        // 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
        this.editorSrc = image;
    }
}

<button #buttonNewImage type="button" (click)="handleButtonClick()">
    Load new image
</button>

<pintura-editor
    [options]="editorDefaults"
    [src]="editorSrc"
    [imageCropAspectRatio]="1"
></pintura-editor>

::ng-deep .pintura-editor {
    height: 600px;
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AngularPinturaModule } from '@pqina/angular-pintura';

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, AngularPinturaModule],
    exports: [AppComponent],
    providers: [],
    bootstrap: [AppComponent],
})
export class AppModule {}

index.html

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

<script src="./jquery.js"></script>
<script src="./jquery-pintura/useEditorWithJQuery-iife.js"></script>
<script src="./pintura/pintura-iife.js"></script>

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

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

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

<script>
    useEditorWithJQuery(jQuery, pintura);

    $(function () {
        var buttonNewImage = $('#buttonNewImage');

        var editor = $('#editor').pinturaDefault({ imageCropAspectRatio: 1 });

        buttonNewImage.on('click', function () {
            // 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).pintura('src', image);
        });
    });
</script>