Перевести прямоугольник в холсте

Question

Мне не удалось полностью очистить прямоугольник, используя метод clearRect, который переводится на холст через направление X. Проблему можно увидеть в прямом эфире на JS Bin - Link to demo

код JS

(function() { 

    var canvas = document.getElementById('canvas'); 
    var context = canvas.getContext('2d'); 

    context.fillStyle = '#ccc'; 
    context.fillRect(0, 0, 100, 50); //x,y,w,h 

    translate(canvas, context, 0, 0, 100, 50, 'x', 5); 

    function translate(canvas, context, x, y, w, h, direction, interval) { 
    context.fillRect(x, y, w, h); 

    if (direction == 'x') { 
     if ((x + interval + w >= canvas.width) || (x + interval < 0)) interval = -1 * interval; 

     setTimeout(function() { 
     context.clearRect(x, y, w, h); 
     translate(canvas, context, x + interval, y, w, h, direction, interval); 
     }, 1000); 
    } 
    } 

}()); 

Это оставляет следы, прежде чем двигаться вперед/назад. И я использовал те же размеры, чтобы очистить прямоугольник, который использовался для его рисования.

Пожалуйста, обратите внимание на полный путь для наблюдения за проблемой.

Answer 1

IE10 и FF21 работают отлично, Chrome дает «остатки».

Даже тогда я не могу последовательно воспроизводить плохо действующий эффект.

Также обратите внимание, что при прокрутке панели результатов jsbin остатки исчезают. Итак, Chrome осознает, что этих оставшихся пикселей не должно быть.

Похоже, что еще одна ошибка с холстом в Chrome (возможно, но не обязательно, связанная с сглаживанием).

Вы можете взломать его, расширив область видимости, чтобы стереть остатки. В качестве альтернативы вы можете оставить перевод и прирастить x по интервалу, чтобы переместить ваш прямоугольник.

Hacky фикс:

context.clearRect(x+((interval>0)?-.5:.5), y, w, h);