Alter image after loading using html canvas

Question

I want to draw a border around an image after it is loaded using new Image()

This works, I see the border, but modifying image.src inside the onload function calls onload again in an infinite loop. But how can I alter the image otherwise?

let image = new Image();
image.onload = function () {
    console.log("onload");
    let canvas = document.createElement('canvas');
    let ctx = canvas.getContext('2d');
    ctx.drawImage(image, 0, 0);
    ctx.strokeStyle = 'red';
    ctx.lineWidth = 5;
    ctx.strokeRect(0, 0, image.width, image.height);
    image.src = canvas.toDataURL();
};
image.src = "https://placehold.co/600x400";
document.body.appendChild(image);

Why not a css border? Please include a minimal reproducible example. — 0stone0
– 0stone0, Commented Jul 24 at 13:28
I assume because OP wants to embed the border into the image. — IT goldman
– IT goldman, Commented Jul 24 at 15:50

0stone0 · Accepted Answer · 2025-07-24 13:43:34Z

2

You apply the canvas value to the same <image>, so the onLoad will run again, going into an infinite loop.

I'd use a temporary image to load the src and then in the onLoad apply it to your actual image element

let tmpImage = new Image();
tmpImage.setAttribute('crossorigin', 'anonymous')
tmpImage.onload = function () {
    console.log("onload");
    let canvas = document.createElement('canvas');
    canvas.width = tmpImage.width;
    canvas.height = tmpImage.height;
    
    let ctx = canvas.getContext('2d');
    ctx.drawImage(tmpImage, 0, 0);
    ctx.strokeStyle = 'red';
    ctx.lineWidth = 5;
    ctx.strokeRect(0, 0, tmpImage.width, tmpImage.height);
    
    let image = new Image();
    image.src = canvas.toDataURL();
    document.body.appendChild(image);
};
tmpImage.src = "https://placehold.co/600x400";

edited Jul 24 at 13:43

answered Jul 24 at 13:37

0stone0

45.5k6 gold badges53 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jon Wilson Jul 24 at 13:46

That's what I am looking for, thanks!

IT goldman · Accepted Answer · 2025-07-24 13:32:53Z

1

If you want to keep your code reusing the image variable, you can always reset the onload property, or remove the event listener, like for example:

// set
image.onload = null;

// before
image.src = "something";

answered Jul 24 at 13:32

IT goldman

20.4k2 gold badges18 silver badges34 bronze badges

2 Comments

Jon Wilson Jul 24 at 13:40

Thanks, you are right, that fixes it in my minimal reproducible example. In my real program it is called in a loop with many images so onload needs to be restored after each call somehow. Tricksy...

ggorlen Jul 24 at 14:44

@JonWilson It'd be best to add that loop to your example. Otherwise, it's too minimal and doesn't capture your actual use case with appropriate fidelity. This approach should still be feasible with multiple images.

Collectives™ on Stack Overflow

Alter image after loading using html canvas

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related