Question

31

Removing an image from a canvas in HTML5

rated 0 times [ 37] [ 6] / answers: 1 / hits: 64417 / 14 Years ago, wed, august 11, 2010, 12:00:00

there's an example, which loads 2 images:

    canvas = document.getElementById(canvas);

    ctx = canvas.getContext(2d);



    var img1 = new Image();

    img.src = /path/to/image/img1.png;

    img.onload = function() {

      ctx.drawImage(img, 0, 0);

    };



    var img2 = new Image();

    img2.src = /path/to/image/img2.png;

    img2.onload = function() {

      ctx.drawImage(img2, 100, 100);

    };

I need to remove(replace) img2 from canvas. What is the best way to do it?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

josuea

Add To Favorites

Follow

Total Points: 609

Total Questions: 121

Total Answers: 104

Location: South Georgia

Member since Fri, Nov 13, 2020

4 Years ago

josuea questions

1 POST http://localhost:3000/undefined/post 404 (Not Found)

Tue, Mar 2, 21, 00:00, 3 Years ago

1 React Warning: Each child in a list should have a unique key prop. in render() function

Mon, May 18, 20, 00:00, 4 Years ago

1 Why is asdf.replace(/.*/g, x) == xx?

Fri, Apr 17, 20, 00:00, 4 Years ago

1 how can i get value of moment format date picker in format (YYYY-MM-DD)

Tue, Dec 10, 19, 00:00, 5 Years ago

1 SyntaxError: Unexpected token in Gulpfile.js

Fri, Sep 27, 19, 00:00, 5 Years ago

View All

answered 14 Years ago raynamadilynl · Accepted Answer

It's not clear what you want the canvas to show when the image is gone. If you want it to be transparent, you could get the image data and fill it with transparent pixels:

var img = ctx.createImageData(w, h);

for (var i = img.data.length; --i >= 0; )

  img.data[i] = 0;

ctx.putImageData(img, 100, 100);

where w and h would be the width and height of your original image.

edit — if you just want another image there, why not just put one there? It will overwrite whatever pixels are there on the canvas.