Removing an image from a canvas in HTML5

Question

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?

Answer 1

There is ``ctx.clearRect(x, y, w, h)'' but this is not a good way to remove the shape, because it will remove any full or partial shapes in the same area of the removed shape. This shouldn't happen, and may remove one or more shapes, I've found it's best to save all your shapes in a list that usually comes from the database using backend language or ajax request, and add for it's shape object an identifier, when you need to remove a shape just remove that shape from the list using the id or the index, then Redraw the canvas with this new array of shapes without a deleted shape, the next time the page loads, this shape will not be added to this list, because it should be deleted from database.

const projectStamps = [{image_id: 'scream', x: 100, y: 100, id: 1}, {image_id: 'scream', x: 100, y: 100, id: 2}, {image_id: 'scream', x: 50, y: 0, id: 3}, {image_id: 'scream', x: 150, y: 0, id: 4}];


let currentShapes = [];
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

function validStampObj(stamp){
    if (typeof(stamp.x) !== 'number' || typeof(stamp.y) !== 'number' || typeof(stamp.image_id) === 'undefined' || !document.getElementById(stamp.image_id)){
      return false;
    } else {
      return true;
    }
}


function addStamp(stamp){
    if (!validStampObj(stamp)){
      console.log("can not add stamp, invalid object");
      return false;
    }
    
     const image = document.getElementById(stamp.image_id);
    stamp['w'] = image.getBoundingClientRect().width;
    stamp['h'] = image.getBoundingClientRect().height;
    
    ctx.drawImage(image, stamp.x, stamp.y, stamp.w, stamp.h);
    currentShapes.push(stamp);
    return stamp;
    
}

let id = 1;

window.onload = function() {

drawProject();

};


function clearCanvas(){
  currentShapes = [];
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  return true;
}

const projectImage = document.getElementById("project_image");

function drawProject(){
  if (!projectImage){console.log('missing project image element');return false;} 
  clearCanvas();
  ctx.drawImage(projectImage,0,0);
  projectStamps.forEach( (stamp)=>{
    addStamp(stamp);
  });
}

function removeStamp(targetId){
  let targetI = false;
  for (let i=0; i<projectStamps.length; i++){
    if (projectStamps[i].id == targetId){
      targetI = i;
      break;
    }
  }
  if (targetI !== false){
    /* remove the stamp from drawing stamps list and redraw the data */
    projectStamps.splice(targetI,1);
    drawProject();
  }
}
setTimeout( ()=>{
removeStamp(3);
console.log("removed icon with id 3");

}, 2500 );

<p>Image to use:</p>

<img id="scream" width="35" height="35"
src="https://i.ibb.co/wYyc259/iconimage.png" alt="The Scream">

<img id="project_image" width="450" height="300"
src="https://i.ibb.co/sK5HtQy/bulding-image.png" style="position:absolute;left:-15455px;">



<p>Canvas:</p>

<button onclick="drawProject()">Redraw things</button>

<canvas id="myCanvas" width="450" height="300"
style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>

notes if you used clearRect in this example it will remove the part of main image of the canvas not just the icon with id 3 like this code does hope it helps.

Answer 2

You can erase an image by drawing the same image again, using a different globalCompositeOperation

ctx.globalCompositeOperation ="xor"
ctx.drawImage(img2, 100, 100);

See https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation

Answer 3

Unlike drawing things yourself, if you 'replace' THE image on a canvas, the old one is still there.

Canvas c2;
...
        if (null != Image2) {
            var ctx = c2.getContext("2d");
            ctx.clearRect(0, 0, c2.width, c2.height);
        }

Answer 4

You can use clearRect() function to clear the image area.Rather then clearing whole context you can clear only the image area using this:

ctx.clearRect(xcoordinate_of_img1,ycoordinate_of_img1,xcoordinate_of_img1 + img1.width ,ycoord_of_img1 +img1.height );

Answer 5

Can you overlay canvas objects (I guess I should try before asking, you can -1 one me for being lazy). I guess I'd be interested in have one canvas element as a background, and then another for a layer objects that pop in and out of view. Might be a little more efficient then having to redraw every image if one gets deleted or moved. I'll play around and see what I can find.

Answer 6

If what "Sunday Ironfoot" said is right, then the best way to remove an image is by drawing the images once again from scratch. For this, you need to have an array of images and draw only the ones you use. For example,

function EmptyClass{};
var img=new Array();
img[0]=new EmptyClass;
img[0].i=new Image();
img[0].src="yourfile1.jpg";
img[0].enabled=true;

img[1]=new EmptyClass;
img[1].i=new Image();
img[1].src="yourfile2.jpg";
img[1].enabled=false;// <-------- not enabled, should not be drawn equivalent to removing


img[2]=new EmptyClass;
img[2].i=new Image();
img[2].src="yourfile3.jpg";
img[2].enabled=true;

for(var i=0;i<3;i++){
if(img[i].enabled)ctx.drawImage(img[i], 100, 100);
}

P.S. I am creating an engine for javascript canvas. Will post it within a week

Peace

Answer 7

I think maybe you misunderstand what a Canvas is.

A canvas is essentially a 2 dimensional grid of pixels along an 'X' axis and a 'Y' axis. You use the API to draw pixels onto that canvas, so when you draw an image you're basically drawing the pixels that make up that image onto your canvas. The reason there is NO method that lets you just remove an image, is because the Canvas doesn't know there's an image there in the first place, it just see pixels.

This is unlike the HTML DOM (Document Object Model) where everything is a HTML element, or an actual 'thing' you can interact with, hook-up script events to etc. this isn't the case with stuff you draw onto a Canvas. When draw a 'thing' onto a Canvas, that thing doesn't become something you can target or hook into, it's just pixels. To get a 'thing' you need to represent your 'thing' in some way such as a JavaScript object, and maintain a collection of these JS objects somewhere. This how how Canvas games work. This lack of a DOM-like structure for Canvas makes rendering very fast, but can be a pain for implementing UI elements that you can easily hook into and interact with, remove etc. For that you might want to try SVG.

To answer your question, simply paint a rectangle onto your Canvas that covers up your image by using the same X/Y coords and dimensions you used for your original image, or try Pointy's solution. 'Cover-up' is probably the wrong terminology, since you're actually replacing the pixels (there are no layers in Canvas).

Answer 8

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.