White lines at zooming

Question

I'm having this problem with craftyjs:

When i try to scale the viewport(Canvas), there are appearing white lines around the objects (the background color).

I think it's because of half pixels, but I can't seem to find a way to fix this. Does anyone know what to do?

EDIT: 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");`

But in my code i'm rounding the x position so those are always round

Answer 1

It seems to be a problem with some combination of clearRect, clip, and drawImage treating half pixels in different ways when the canvas has a scale transformation applied.

When a single sprite is moved across the background, we clear the region it moved through, clip to that, and then draw all entities that overlap.

In this case, the clear operation is seemingly affecting more pixels than the draw operation. I was able to kind of fix this in Chrome, but Firefox was pretty stubborn about treating these differently. I'll post here again if I'm able to find a good fix or workaround. (Worse case, we can fall back to redrawing the entire canvas each time while zoomed, but that would kind of suck performance-wise.)