Белые линии при масштабировании

Question

У меня эта проблема с craftyjs:

Когда я пытаюсь масштабировать область просмотра (Canvas), вокруг объектов появляются белые линии (цвет фона).

Я думаю, что это из-за половины пикселей, но я не могу найти способ исправить это. Кто-нибудь знает что делать?

РЕДАКТИРОВАТЬ: fiddle: http://jsfiddle.net/ysDtQ/44/

Crafty.init(960,540);
Crafty.canvas.init();  
Crafty.scene("loading", function() {
Crafty.background("#000");
Crafty.sprite(1200,768,"http://us.123rf.com/400wm/400/400/criminalatt/criminalatt1010/criminalatt101000007/8072257-gras-textuur-straight.jpg", {background : [0,0]});
Crafty.sprite(150,150,"http://www.fpmheemskerk.com/STooNeD.png",{stoo:[0,0]});
Crafty.e('2D, Canvas, background').attr({x:0, y:0, w:1200, h:798, z:1, alpha:1});
Crafty.e('2D, Canvas, stoo').attr({x:0, y:0, w:150, h:150, z:2, alpha:1}).bind("EnterFrame",function(){this.x += 0.01;});
Crafty.viewport.scale(1.51111);
});
Crafty.scene("loading");`

Но в моем коде я округляю позицию х, чтобы они всегда были круглыми

Answer 1

Кажется, проблема с какой-то комбинацией clearRect, clip, а также drawImage обработка половин пикселей по-разному, когда к холсту применено преобразование масштаба.

Когда один спрайт перемещается по фону, мы очищаем область, через которую он перемещался, обрезаем ее, а затем рисуем все перекрывающиеся объекты.

В этом случае операция очистки влияет на большее количество пикселей, чем операция рисования. Я смог исправить это в Chrome, но Firefox был довольно упрям ​​в том, чтобы относиться к ним по-другому. Я опубликую здесь снова, если смогу найти хорошее решение или обходной путь. (В худшем случае мы можем вернуться к перерисовке всего холста каждый раз при увеличении, но это отчасти отстает в плане производительности.)