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?