Drawing an image from a data URL to a canvas

javascript

image-manipulation

canvas-api

data-url

byAnton Shumikhin·Feb 6, 2025

To display an image encoded as a data URL on a canvas:

const canvas = document.getElementById('canvasId'); // Your canvas's ID replacing 'canvasId'
const ctx = canvas.getContext('2d');
const img = new Image();
img.onload = () => ctx.drawImage(img, 0, 0); // Draws the image at the top-left corner of the canvas
img.src = 'data:image/png;base64,DATA_URL'; // Replace DATA_URL with your data URL

In short, load the image with your data URL, use onload to guarantee the image is ready before drawing, and utilize drawImage() to paste it on the canvas.

From zero to hero: Detailed explanation

Step 1: Seize the canvas and create the context

const canvas = document.getElementById('myCanvas'); 
const ctx = canvas.getContext('2d'); // ctx stands for 'context'; it's shorter and we devs like things concise

Step 2: Birth of an Image

let img = new Image(); // It's alive!

Step 3: Waiting for the model to get ready

img.onload = () => {
    // Red carpet! Let's clear the stage for our star
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    // Match the canvas to our star's measurements for a perfect fit
    canvas.width = img.width; canvas.height = img.height;
    // Voila! Let the beauty shine!
    ctx.drawImage(img, 0, 0);
};

Step 4: The big reveal

img.src = 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ...'; // A moment of suspense before the grand unveiling!

Step 5: Preparing for a rainy day

img.onerror = (error) => {
    console.error('Uh-oh! The image couldn’t make it to the event :', error);
    // Put some more error handling logic here
};

Step 6: Wrapping it up with modern language

async function loadImageDataURL(url) {
    return new Promise((resolve, reject) => {
        const img = new Image();
        img.onload = () => resolve(img);
        img.onerror = reject; 
        img.src = url;
    });
}

Step 7: Camera, Lights and Action!

Before teasing the eyes with the image on the canvas remember the image likes to be in full limelight. Always handle image manipulation after the onload event to ensure the image is fully revealed.

The Pro-tips section

Handling squads (Multiple images)

Juggling multiple images? Make sure each gets its turn on the 'canvas stage'. Use promises or async functions to manage the crowd and keep the code clean.

Making use of File API (For File objects)

If you have the image as a file object, utilize the FileReader API to morph it into a data URL:

function readAsDataURL(file) {
    const reader = new FileReader();
    reader.onload = (event) => {
        let img = new Image();
        img.onload = () => {
            ctx.drawImage(img, 0, 0); // Spotlight on our star!
        };
        img.src = event.target.result;
    };
    reader.readAsDataURL(file);
}