Gap between images that are side by side *Firefox and IE Issue*

[InfiniteLoop]

Hi, new to the forums I've got an issue drawing images on the canvas on Firefox and IE. 

 

I created an array of Sprites (Floor Tiles), iterated through them and placed them right next to each other. When I translate the canvas (platformer style), everything draws perfectly EXCEPT on Firefox and IE. Both browsers seem to draw each sprite with a 1 pixel gap between them, but only when I'm calling ctx.translate(). The other browsers draw my floor tiles appropriately. 

 

 

Wondering if anybody ran into a similar issue.  I'm running the latest version of each browser, and rounding sprite position coordinates when calling drawImage(). Again, this pixel gap issue only happens on Firefox and Internet Explorer. Thanks! 

 

Chrome / Opera / Chrome Mobile / Opera Mobile / Safari Mobile (During ctx.translate)

 

 

 

Firefox / Internet Explorer (During ctx.translate)

 

[InfiniteLoop]

Never mind Found the solution. Apparently the gaps were caused due to anti-aliasing. I'm still trying to confirm this, but if that's the case, perhaps different browsers handle anti-aliasing differently? Can't I just turn it on and off? Anyways the solution was to add exactly 1 pixel more to the width and height parameters of my floor tiles drawImage() call. 

 

context.drawImage(img,sx,sy,swidth,sheight,x,y, width + 1, height + 1);

 

I read about it on a stackoverflow question, but (one of) the suggested solution(s) was to add 0.5 pixels. Yet I find in my case, I still need another 0.5 to remove the gap. This obviously won't ruin my physics and collision since I'm just adding the pixels during the draw call.

 

No more gaps on any browser I know of, and 1 pixel doesn't really bother me, even though it feels like a hack. Hope this helps somebody and I'll mark the question answered.