title: canvas animation slows down
body: <p>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: <a href="http://jsbin.com/aleqef/" rel="nofollow">http://jsbin.com/aleqef/</a></p>
  
  <p>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.</p>
  
  <p><code><pre>
  var data = [
    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAMAAADXEh96AAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAGUExURQAAAP///6XZn90AAAAcSURBVHjaYmBgYGBkZAQSYAjlgUXgYhAeQIABAAGkABPpfLrFAAAAAElFTkSuQmCC",
    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAMAAADXEh96AAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAGUExURQAAAP///6XZn90AAAAeSURBVHjaYmBkAEEgYGRkBBEgFgMDRBTGA8sBBBgAAaQAE03fiAgAAAAASUVORK5CYII=",
    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAMAAADXEh96AAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAGUExURQAAAP///6XZn90AAAAdSURBVHjaYmBgZGRkYGAAY0YGCITxoHIQUYAAAwABpAATvSsONQAAAABJRU5ErkJggg=="
  ];<br>
  var context = document.getElementById("canvas").getContext("2d");
  var count = data.length;
  var patterns = [];
  var pattern = 0;<br>
  function onload(e) {
    patterns.push(context.createPattern(e.target, "repeat"));
  }<br>
  function draw() {
    for (var angle = 0; angle &lt; 360; angle += 5) {
      var rad = (angle * Math.PI) / 180;
      var x = 200 * Math.cos(rad);
      var y = 200 * Math.sin(rad);<br>
      context.moveTo(0, 0);
      context.lineTo(x, y);
    }
  }<br>
  function animate() {
    window.setTimeout(animate, 1000 / 60);<br>
    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;
    }
  }<br>
  for (var i = 0; i &lt; count; i++) {
    var image = new Image();
    image.onload = onload;
    image.src = data[i];
  }<br>
  animate();
  </pre></code></p>