Jump to content

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)





Firefox / Internet Explorer (During ctx.translate)



Link to comment
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. 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...