キャンバスアニメーションが遅くなります

Question

以下のコードはマーキーラインをアニメーション化しています。アニメーションはかなり速く始まりますが、時間の経過と共に顕著に減速します。理由を理解するのを助けてください。同じコードがここにあります：http://jsbin.com/aleqef/

EDIT：私はアニメーションループの間に新しいオブジェクトを作成しません。すべてがキャッシュされているように見えます。パターンやコンテキストなどです。疑わしいものは何も表示されません。メモリの問題のように見えますが、私はなぜそれがわかりません。

 
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(); 

Answer 1

（にbeginPath（））この変更を試してみてください

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

リンクhttp://jsbin.com/aleqef/4/edit#preview