Why doesn't my code loop the animation correctly with Javascript and HTML5 canvas?

Question

I'm super new to coding and I've been trying to figure out animations with Javascript and HTML5. I have this "loading bar" like animation where a rectangle expands until it fills up the canvas. The idea is that once the canvas is covered the box clears and starts over. Instead, the rectangle fills the canvas and just starts flickering. Any ideas?

window.onload = function() {
  var wipeWidth = 0
  var canvas = document.getElementById('canvas');
  var context = canvas.getContext("2d");
  console.log(context);

  function drawRect() {
    context.clearRect(0,0,300,150)
    context.fillStyle = "#305ef2";
    context.rect(0, 0, wipeWidth, 150);
    context.fill()
    wipeWidth += 10
    if(wipeWidth > 300) {
      wipeWidth = 0;
    }
  }

  setInterval(drawRect,50)
}

Answer 1

You forgot to clear the path (beginPath). You can use fillRect instead to avoid this.

window.onload = function() {
  var wipeWidth = 0
  var canvas = document.getElementById('canvas');
  var context = canvas.getContext("2d");
  console.log(context);

  function drawRect() {
    context.clearRect(0, 0, 300, 150)
    context.fillStyle = "#305ef2";
    // this
    context.beginPath()
    context.rect(0, 0, wipeWidth, 150);
    context.fill()
    // or just this
    // context.fillRect(0, 0, wipeWidth, 150);
    wipeWidth += 10
    if (wipeWidth > 300) {
      wipeWidth = 0;
    }
  }

  setInterval(drawRect, 50)
}

<canvas id="canvas"></canvas>