анимация холста замедляется

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