Sign in to follow this  
InfiniteLoop

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

Recommended Posts

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)

 

forum01.png

 

 

Firefox / Internet Explorer (During ctx.translate)

 

forum02.png

Share this post


Link to post
Share on other sites

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 + 1height + 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. 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.