CODEWITHSUNDEEP
javascripthtmlhtml5-canvas
meow4004
meow4004

Reputation: 3

clearRect() works strangely

ClearRect works in a strange way; I was trying to refresh the canvas but it did not work with this code

<!DOCTYPE html>
<html>
    <head>
        <title> Crypt </title>
    </head>
    <body>
        <canvas id="canvas" width="500" height="300" style="border-style: dashed;"></canvas>
        <script type="text/javascript">
        var can     =   document.getElementById("canvas")               ,
            ctx     =   can.getContext("2d")                            ,
            posX    =   0                                               ,
            posY    =   0                                               ;

        function game(){ // HERE
            ctx.clearRect(0, 0, can.width, can.height);
            ctx.rect(posX, posY, 20, 20);
            ctx.stroke();

            posX += 10;
            posY += 10;
        }

        window.setInterval("game()", 100);
        </script>
    </body>
</html>

works perfectly with:

<!DOCTYPE html>
<html>
    <head>
        <title> Crypt </title>
    </head>
    <body>
        <canvas id="canvas" width="500" height="300" style="border-style: dashed;"></canvas>
        <script type="text/javascript">
        var can     =   document.getElementById("canvas")               ,
            ctx     =   can.getContext("2d")                            ,
            posX    =   0                                               ,
            posY    =   0                                               ;

        function game(){    // HERE
            ctx.clearRect(0, 0, can.width, can.height);
            ctx.strokeRect(posX, posY, 20, 20);

            posX += 10;
            posY += 10;
        }

        window.setInterval("game()", 100);
        </script>
    </body>
</html>

Is someone able to explain ? Thank you I don't really understand how javascript works so if you've some lectures, i'll take it

Thank you ^2

Upvotes: 0

Views: 106

Answers (1)

Kaiido
Kaiido

Reputation: 136638

The problem you are facing is not with clearRect() but that you always call ctx.rect() on the same Path object.

To avoid it, you have to call ctx.beginPath() at each new drawing : 

var can = document.getElementById("canvas"),
  ctx = can.getContext("2d"),
  posX = 0,
  posY = 0;

function game() {
  ctx.clearRect(0, 0, can.width, can.height);

  // create a new Path2d
  ctx.beginPath();

  ctx.rect(posX, posY, 20, 20);
  ctx.stroke();

  posX += 10;
  posY += 10;
}

window.setInterval(game, 100);
<canvas id="canvas" width="500" height="300" style="border-style: dashed;"></canvas>

Or alternatively, you could call ctx.strokeRect() which does handle the ctx.beginPath();, ctx.rect(); and ctx.stroke(); in a single method.

var can = document.getElementById("canvas"),
  ctx = can.getContext("2d"),
  posX = 0,
  posY = 0;

function game() { // HERE
  ctx.clearRect(0, 0, can.width, can.height);

  ctx.strokeRect(posX, posY, 20, 20);

  posX += 10;
  posY += 10;
}

window.setInterval(game, 100);
<canvas id="canvas" width="500" height="300" style="border-style: dashed;"></canvas>

Upvotes: 3

Related Questions