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)
}

Konrad · Accepted Answer · 2022-07-03 10:15:15Z

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>

edited Jul 3, 2022 at 10:15

answered Jun 30, 2022 at 20:32

Konrad

24.9k5 gold badges35 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Blindman67 Over a year ago

context.closePath() is not required in your code. It is not the adjunct of beginPath

Konrad Over a year ago

@Blindman67 true, leaving explanation here stackoverflow.com/a/22857893/5089567

IT goldman · Accepted Answer · 2022-06-30 20:41:37Z

0

fillRect, requestAnimationFrame

var wipeWidth = 0
var canvas = document.getElementById('canvas');
var context = canvas.getContext("2d");
var direction = +10;

function drawRect() {
  context.clearRect(0, 0, canvas.width, canvas.height);
  context.fillStyle = "#305ef2";
  context.fillRect(0, 0, wipeWidth, 150);
  wipeWidth += direction
  if (wipeWidth > canvas.width || wipeWidth < 0) {
    direction *= -1;
  }
  requestAnimationFrame(drawRect)
}

drawRect()

canvas {
  background: gray;
}

<canvas id="canvas" width="600" height="50"></canvas>

edited Jun 30, 2022 at 20:41

answered Jun 30, 2022 at 20:36

IT goldman

20.4k2 gold badges18 silver badges34 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related