My canvas doesn't reset

Question

I'm doing a BonusBar for a mini game. I've created 2 canvas, one with only the border, another one with a green bar.

My objective is, when x = 300, clean the green canvas to redraw the green rectangle.

The problem is that the canvas is not cleared.

here's the code

        var CarreBase = document.getElementById("CarreBase");
        var CarreBasectx = CarreBase.getContext("2d");
        var x = 0;
        var CarreRempli = document.getElementById("CarreRempli");
        var CarreRemplictx = CarreRempli.getContext("2d");

        BarreBonus();

        function BarreBonus() {
          x = x + 30;
          console.log(x)
          if (x > 300) {
            CarreRemplictx.clearRect(0, 0, x, 100);
            /*CarreRemplictx.rect(0,0,x,200);
            CarreRemplictx.fillStyle="009FE3";
            CarreRemplictx.fill();*/
            x = 0;
            changement = true;
          }

          CarreRemplictx.rect(0, 0, x, 200);
          CarreRemplictx.fillStyle = "00C327";
          CarreRemplictx.fill();
          setTimeout("BarreBonus ()", 1000);
        }

 #CarreBase {
   width: 350px;
   height: 25px;
   left: 150px;
   top: 0px;
   border: 2px solid #000000;
   position: absolute;
   z-index: 1;
 }
 #CarreRempli {
   position: absolute;
   left: 150px;
   top: 0px;
   width: 355px;
   height: 27px;
   z-index: 0;
 }

<!DOCTYPE html>
<meta charset="Unicode">
<html>

<head>
  <link rel="stylesheet" type="text/css" href="syra.css" />
  <title>syracuse</title>
</head>

<body>
  <canvas id="CarreBase"></canvas>Bonus Bar :
  <canvas id="CarreRempli"></canvas>
  <script src="js/syra.js"></script>
</body>

</html>

this just a simple control-flow error : right after clearing the carreRempli, you will draw again inside it. Either put 'return' at the end of your 'if' or handle if/else properly. Then i suggest you delete this question -ce n'était qu'un moment d'inattention- :-) — GameAlchemist, Sep 29 '13 at 16:20
I suggest using setTimeout without quotes `setTimeout(BarreBonus, 1000);` rather than with quotes `setTimeout("BarreBonus ()", 1000);` you can read more on why in the security section of this answer https://stackoverflow.com/a/10313023/1309377 — Andrew Lohr, Dec 14 '17 at 20:20

score 0 · Answer 1 · edited Dec 15 '17 at 17:07

var CarreBase = document.getElementById("CarreBase");
        var CarreBasectx = CarreBase.getContext("2d");
        var x = 0;
        var CarreRempli = document.getElementById("CarreRempli");
        var CarreRemplictx = CarreRempli.getContext("2d");

        BarreBonus();
       var itr=0;
        function BarreBonus() {
          x = x + 30;
          console.log(x)
          if (x > 300) {
           itr++;
            CarreRemplictx.clearRect(0, 0, x, 200);
            CarreRemplictx.beginPath();
            //CarreRemplictx.rect(0,0,x,200);
            CarreRemplictx.fillStyle="GREEN";
            //CarreBasectx.fillStyle="GREEN";
            CarreRemplictx.fill();
            //CarreBasectx.fill();
            if(itr>1)
             return ;
            else 
             x = 0;
            
            changement = true;
          }
          else{

          CarreRemplictx.rect(0, 0, x, 200);
          CarreRemplictx.fillStyle = "00C327";
          CarreRemplictx.fill();
          
          }
          setTimeout("BarreBonus ()", 1000);
        }

#CarreBase {
   width: 350px;
   height: 25px;
   left: 150px;
   top: 0px;
   border: 2px solid #000000;
   position: absolute;
   z-index: 1;
 }
 #CarreRempli {
   position: absolute;
   left: 150px;
   top: 0px;
   width: 355px;
   height: 27px;
   z-index: 0;
 }

<!DOCTYPE html>
<meta charset="Unicode">
<html>

<head>
  <link rel="stylesheet" type="text/css" href="syra.css" />
  <title>syracuse</title>
</head>

<body>




  <canvas id="CarreBase"></canvas>Bonus Bar :
  <canvas id="CarreRempli"></canvas>
  <script src="js/syra.js"></script>
</body>

</html>

you had use 100 instead of 200 in clearrect() which cleared only half of the rectangle.
The beginPath() method begins a path, or resets the current path.but you didn't.

Akubik · Answer 2 · 2017-12-14T21:55:19.607

trouble with feel() because filling all old path. for resolving this issue need use 'CarreRemplictx.beginPath();' Resets the current default path.
Additional info:
4.12.5.1.12 Drawing paths to the canvas
11 Drawing paths to the canvas

rewrite this code, but for example...

var CarreBase = document.getElementById("CarreBase");
var CarreBasectx = CarreBase.getContext("2d");
var x = 0;
var CarreRempli = document.getElementById("CarreRempli");
var CarreRemplictx = CarreRempli.getContext("2d");

BarreBonus();

function BarreBonus() {
  x = x + 30;
  console.log(x)
  if (x > 300) {
    CarreRemplictx.clearRect(0, 0, x, 200);
    CarreRemplictx.beginPath();
    /*CarreRemplictx.rect(0,0,x,200);
    CarreRemplictx.fillStyle="009FE3";
    CarreRemplictx.fill();*/
    x = 0;
    changement = true;
  } else {
    CarreRemplictx.fillStyle = "#00C327";
    
    CarreRemplictx.rect(0, 0, x, 200);
    CarreRemplictx.fill();
    /* or single CarreRemplictx.fillRect(0, 0, x, 200);*/
  }
  setTimeout(BarreBonus, 1000);
}

#CarreBase {
  width: 350px;
  height: 25px;
  left: 150px;
  top: 0px;
  border: 2px solid #000000;
  position: absolute;
  z-index: 1;
}

#CarreRempli {
  position: absolute;
  left: 150px;
  top: 0px;
  width: 355px;
  height: 27px;
  z-index: 0;
}

<!DOCTYPE html>
<meta charset="Unicode">
<html>

<head>
  <link rel="stylesheet" type="text/css" href="syra.css" />
  <title>syracuse</title>
</head>

<body>
  <canvas id="CarreBase"></canvas>Bonus Bar :
  <canvas id="CarreRempli"></canvas>
  <script src="js/syra.js"></script>
</body>

</html>

the clear doesn't fully clear the bar. The vertical half still remains. — Andrew Lohr, Dec 14 '17 at 20:38
for full clear use `CarreRemplictx.clearRect(0, 0, x, 200); ` but what author wanted?.... i corrected code — Akubik, Dec 14 '17 at 20:42

My canvas doesn't reset

2 Answers2