Why is color of the canvas rectangle getting stuck?

Question

I made a game where player press on rectangle which is moving at random location increases score. Here is my code:

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <canvas id = "c" width = "500" height = "500"></canvas>
        <canvas id = "d" width = "60" height = "60" onclick = "inc()"></canvas>
        <style>
        body {
        margin:0;
        padding:0;
        background-color:blue;
        }

        #d {
        position:absolute;
        }
        </style>
        <script>
            var can = document.getElementById("c");
            var can2 = document.getElementById("d");
    can.height = window.innerHeight;
    can.width = window.innerWidth;
    can2.height = window.innerHeight;
    can2.width = window.innerWidth;
    var s = can.getContext("2d");
    var s2 = can2.getContext("2d");
    var points = 0;
    
    function move() {
        h = Math.ceil(Math.random()*(can2.height-60))+20;
        w = Math.ceil(Math.random()*(can2.width-50))+20;
        s2.clearRect(0, 0, window.innerHeight, window.innerWidth);
        s2.fillRect(this.w, this.h, 60, 60);
    }
    
    function inc() {
        s.clearRect(0, 0, window.innerHeight, window.innerWidth);
        s.fillText(points++, 300, 40);
        return points;
    }
    
    s.font = "bold 35px Arial";
    s.textAlign = points;
    s.fillText(points, 300, 40);
    
    s2.fillStyle = "#DEF012";
    s2.fillRect(60, 60, 58, 55);
    
    setInterval(move, 200);
        </script>
    </body>
</html>

But when the rectangle is moving, the rectangle color at the side gets stuck. How do i can move the rectangle without that problem?

score 1 · Accepted Answer · answered Jan 29 '18 at 20:36

The parameters are backwards in your call to clearRect.

Also note, it seems like you might mean for the #c canvas to be position:absolute also.

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <canvas id = "c" width = "500" height = "500"></canvas>
        <canvas id = "d" width = "60" height = "60" onclick = "inc()"></canvas>
        <style>
        body {
        margin:0;
        padding:0;
        background-color:blue;
        }

        #d {
        position:absolute;
        }
        </style>
        <script>
            var can = document.getElementById("c");
            var can2 = document.getElementById("d");
    can.height = window.innerHeight;
    can.width = window.innerWidth;
    can2.height = window.innerHeight;
    can2.width = window.innerWidth;
    var s = can.getContext("2d");
    var s2 = can2.getContext("2d");
    var points = 0;
    
    function move() {
        h = Math.ceil(Math.random()*(can2.height-60))+20;
        w = Math.ceil(Math.random()*(can2.width-50))+20;
        s2.clearRect(0, 0, window.innerWidth, window.innerHeight);
        //s2.clearRect(0, 0, window.innerHeight, window.innerWidth);
        s2.fillRect(this.w, this.h, 60, 60);
    }
    
    function inc() {
        s.clearRect(0, 0, window.innerHeight, window.innerWidth);
        s.fillText(points++, 300, 40);
        return points;
    }
    
    s.font = "bold 35px Arial";
    s.textAlign = points;
    s.fillText(points, 300, 40);
    
    s2.fillStyle = "#DEF012";
    s2.fillRect(60, 60, 58, 55);
    
    setInterval(move, 200);
        </script>
    </body>
</html>

score 0 · Answer 2 · answered Jan 29 '18 at 20:41

I'd create a box object and check for its coordinates instead of moving one canvas on top of another.
Something like that:

let box = { x: somestartingvalue, y: etc., w: 60, h: 60 };

function getMousePos() { ... }

function canvasOnClick() {
    let mouse = getMousePos();
    if (mouse.x >= box.x && mouse.x <= box.x + box.w
        && mouse.y >= box.y && mouse.y <= box.y + box.h)
        ++GLOBAL_VAR_SCORE;
}

function move() {
    box.x = Math.floor(Math.random() * CANVAS_WIDTH); // Store these 2 global constants
    box.y = Math.floor(Math.random() * CANVAS_HEIGHT);
}

your_canvas.addEventListener('click', canvasOnClick, false);
setInterval(move, 200);

Sources:

Why is color of the canvas rectangle getting stuck?

2 Answers2