CODEWITHSUNDEEP
javascripthtml5-canvas
akonsu
akonsu

Reputation: 29538

canvas animation slows down

the code below animates a marquee line. the animation starts pretty fast but slows down noticeably over time. Please help me figure out why. The same code is here: http://jsbin.com/aleqef/

EDIT: I do not create any new objects during my animation loop, everything seems to be cached, that is, the patterns, the context, etc. I just do not see anything suspicious. Looks like a memory problem but I am not sure why.

var data = [
  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAMAAADXEh96AAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAGUExURQAAAP///6XZn90AAAAcSURBVHjaYmBgYGBkZAQSYAjlgUXgYhAeQIABAAGkABPpfLrFAAAAAElFTkSuQmCC",
  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAMAAADXEh96AAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAGUExURQAAAP///6XZn90AAAAeSURBVHjaYmBkAEEgYGRkBBEgFgMDRBTGA8sBBBgAAaQAE03fiAgAAAAASUVORK5CYII=",
  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAMAAADXEh96AAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAGUExURQAAAP///6XZn90AAAAdSURBVHjaYmBgZGRkYGAAY0YGCITxoHIQUYAAAwABpAATvSsONQAAAABJRU5ErkJggg=="
];

var context = document.getElementById("canvas").getContext("2d");
var count = data.length;
var patterns = [];
var pattern = 0;

function onload(e) {
  patterns.push(context.createPattern(e.target, "repeat"));
}

function draw() {
  for (var angle = 0; angle < 360; angle += 5) {
    var rad = (angle * Math.PI) / 180;
    var x = 200 * Math.cos(rad);
    var y = 200 * Math.sin(rad);

    context.moveTo(0, 0);
    context.lineTo(x, y);
  }
}

function animate() {
  window.setTimeout(animate, 1000 / 60);

  if (patterns.length > 0) {
    context.clearRect(0, 0, context.canvas.width, context.canvas.height);
    draw();
    context.lineWidth = 1;
    context.strokeStyle = patterns[pattern];
    context.stroke();
    pattern = (pattern + 1) % patterns.length;
  }
}

for (var i = 0; i < count; i++) {
  var image = new Image();
  image.onload = onload;
  image.src = data[i];
}

animate();

Upvotes: 4

Views: 2109

Answers (1)

Heitor Chang
Heitor Chang

Reputation: 6057

Try this change (beginPath())

if (patterns.length > 0) {
    context.clearRect(0, 0, context.canvas.width, context.canvas.height);
    context.beginPath();
    draw();

Link http://jsbin.com/aleqef/4/edit#preview

Upvotes: 4

Related Questions