JavaScript canvas remove image

Question

I'm writing a platformer and I want to implement own art, now I know how to display it and this isn't my question. It rather is how do I remove it? I tried drawing a rectangle over it and removing it, but that doesn't seem to work, here's my code:

function clearImage(id) {
    for (var i = 0; i < 6;) {
        if (img_id[i] == id) {
            console.log(img_loc_x[i]);
            console.log(img_loc_y[i]);
            ctx.fillRect(img_loc_x[i], img_loc_y[i], "1000", "1000");
            ctx.clearRect(img_loc_x[i], img_loc_y[i], "1000", "1000");

            img_loc_x[i] = null;
            img_loc_y[i] = null;
            img_id[i] = null
            console.log("Cleared image with id: "+id+" succesfully!");
        } else {
            i++;
        }
    }
}

I'm using some arrays to store the image data such as the location and an id form management, but I didn't implement a method yet to get the dimensions of it, thats why I'm giving it the size parameters. (Strangely it works if I enter the fillRect and clearRect commands in the console)

Answer 1

It's difficult to know what's going wrong without seeing the rest of your code, but because you said it works when you type it into the console, my guess is that you're calling clearRect before you draw the image. This can happen if you're waiting for the image to load before you draw it, and do not wait for that to have happened before you clear it.

For example:

var sprite = new Image();
sprite.onload = function() { ctx.drawImage(sprite, 0, 0); };
sprite.src = "sprites/sheet1.png";

ctx.clearRect(0, 0, canvas.width, canvas.height); // oops! runs immediately

Try adding a debugger; statement to your code immediately before drawing and clearing and stepping through (or litter your code with console.log statements) to see what order things are happening and make sure nothing funny is going on.

Answer 2

I don't have enough reputation to put it in the comment ...

What I do is I have several canvases on top of each other, organized with z-index. In the background I would draw background (such as it is), then on next layers actors, then bullets and so on ...

The idea is, that you clear then redraw the whole layer. But only the layer which needs to be redrawn. It is much more efficient that having single canvas and redrawing everything.

Answer 3

A Javascript canvas behaves like, well, a canvas. The moment you draw an image onto the canvas, it is no longer an image. The effect of any draw function is that a bunch of pixels on the canvas change their RGBA color values. The pixels don't retain a memory of what object they represent. So you can not really move or remove an image you drew onto the canvas. You can only paint it over.

The pattern used by most games which use the HTML5 canvas is to use the requestAnimationFrame function to pass a draw function which:

1. completely erases the canvas by using context.fillRect or context.clearRect with the parameters (0, 0, canvas.width, canvas.height).
2. redraws the whole game scene
3. call requestAnimationFrame again with the same function so the same thing happens in the next render-loop of the web browser.