How do I remove an already drawn image from HTML5 Canvas (just that one not other ones)

Question

So, I have to make this project for school and I need to be able to remove one image specifically because when I do clearRect() it removes all images.

<!DOCTYPE html>
<html>

<head>
    <title>Game</title>
    <style type="text/css">
    * { margin:0; padding:0; } /* to remove the top and left whitespace */

    html, body { width:100%; height:100%; } /* just to be sure these are full screen*/

    canvas { display:block; } /* To remove the scrollbars */

    #gC {
        position: relative;
        left: 16vw;
        top: 9vh;
        margin: 0;
        padding: 0;
    }

    body {
        background-image: url('bg.jpeg') !important;
        overflow: hidden !important;
    }
    </style>
</head>

<body> <canvas id="gC" width="1500" height="1000"></canvas>
    <script type="text/javascript">
    var canvas = document.querySelector("#gC");
    var ctx = canvas.getContext("2d");
    var team1 = new Image();
    var bT = new Image();
    var t1_x = 150;
    var t1_y = 100;
    var bT_x = 50;
    var bT_y = 350;
    var AI_I = 0;
    team1.src = "team1.png";
    bT.src = "bT.png";

    function team1AI() {
        ctx.clearRect(0, 0, canvas.height, canvas.width);
        ctx.drawImage(bT, bT_x, bT_y);
        ctx.drawImage(team1, t1_x, t1_y);
        t1_x++;
    }
    var t1AI = setInterval(team1AI,10);

    function t1AI_inter(){
        if(AI_I >= 90){
            clearInterval(t1AI);
        }

        AI_I++;

    }

    function leftArrowPressed(){
        ctx.clearRect(0, 0, canvas.height, canvas.width);
        ctx.drawImage(bT, bT_x, bT_y);
        bT_x-=5;
    }

    function moveSelection(evt) {
        switch (evt.keyCode) {
            case 37:
                leftArrowPressed();
                break;
            case 39:
                rightArrowPressed();
                break;
            case 38:
                upArrowPressed();
                break;
            case 40:
                downArrowPressed();
                break;
/*
            case 32:
                spaceKeyPress();
                break;
*/
        }
    }

    setInterval(t1AI_inter,10);

    window.addEventListener('keydown', moveSelection);

    </script>

If you need to remove an element or elements check this: https://api.jquery.com/remove/ — SrAxi, Mar 20 '17 at 16:48
Also, there is already a question about removing an element with JavaScript: http://stackoverflow.com/questions/3387427/remove-element-by-id — SrAxi, Mar 20 '17 at 16:50
@SrAxi I believe OP aka Ben A.K.A BlackSky aka Cyber aka THEGAMERCraft refers to restoring the original canvas image data after canvas.draw'ing an image onto it. — le_m, Mar 20 '17 at 16:53
Have you tried saving the previous state and redrawing to it if you need to _undo_? — GMaiolo, Mar 20 '17 at 16:56
@le_m thank you. In that case, this could be interesting: http://stackoverflow.com/questions/4858187/save-restore-background-area-of-html5-canvas — SrAxi, Mar 20 '17 at 16:56
@CyberakaTHEGAMERCraft Follow SrAxi's link to the answer. It is really well explained. — le_m, Mar 20 '17 at 16:59
That was very helpful.... But I don't understand the 2nd and 3rd parameter ctx.putImageData(saved_rect, 20, 30); 20, and 30. Please explain. — Ben, Mar 20 '17 at 17:10

Wandeber · Answer 1 · 2017-03-20T17:44:58.333

Games are not (usually) based on events like "keydown". They are based on loops, one loop of frames. In every frame or iteration, you should, for example,

read the user input
update the status of every component of your game
draw the new frame

Anyway, if you want to remove just one image, just remove all of them and redraw just the ones that should be visible. You could have an array with the status (visible or not) of every image or something like this:

var images = [
    {visible: false},
    {visible: true},
    {visible: true}
];

You could also use a function "draw" which draws the images based in the previous array and another two functions called "hide" and "show", which could receive the index of the image to hide or show, update its status in the array and then call the draw function.

If you want to go ahead, read about game loops and specially about the requestAnimationFrame function, which is used in web game development.

score 0 · Answer 2 · answered Mar 21 '17 at 12:36

0

I just figured it out! All I had to do is:

ctx.clearRect(t1_x,t1_y,canvas.height,canvas.width);

answered Mar 21 '17 at 12:36

Ben

57
9

Except (from mozilla.org) void ctx.clearRect(x, y, width, height); – captain puget Jan 21 '22 at 18:05

How do I remove an already drawn image from HTML5 Canvas (just that one not other ones)

2 Answers2