Canvas drawImage - visible edges of tiles in firefox/opera/ie (not chrome)

Question

I\'m drawing a game map into canvas. The ground is made of tiles - simple 64x64 png images.

When I draw it in Chrome, it looks ok (left), but when I draw it in Firef

Answer 1

I draw all of my tiles to a perfectly sized buffer and then draw that buffer to the display canvas with drawImage, which takes care of scaling. If you have 16x16 tiles, make your buffer some multiple of 16, like 256x128 or 64x96 or something along those lines. This eliminates spaces between tiles that arise due to drawing with scaled dimensions. The only downside is that you must draw the full background twice: once to draw the background in pixel perfect space, and once to draw the scaled image to the final display canvas. Remember to maintain aspect ratio between the buffer and display canvas to avoid skewing your final image.