0

I'm trying to animate multiple horizontal lines on a canvas like so:

var from = 0;

function draw()  {

  var to = from + step; 
  ctx.clearRect(0, 0, w, h);

  for(var row = 0; row < rowCount; row++) {

    ctx.moveTo(from, data[row][from] + offset);

    for (var x = from + 1; x <= to; x++) {
      this.ctx.lineTo(x, data[row][x] + offset);
    }
  }

  ctx.stroke();
  from = to;
  window.requestAnimationFrame(this.draw);
}

It starts quite smoothly but becomes very slow in the end (especially on higher resolutions). Is there a better way to do an animation like that?

Demo

Ulrich Fischer
  • 173
  • 1
  • 1
  • 13

0 Answers0