I'm making a game in HTML5 using canvas.
When i use CanvasRenderingContext2D.drawImage to draw a texture that is cropped from an image you can sometimes see a small bit of the surounding textures in the image.
An example is when i render my own text from this tileset: font "tileset", where depending on the width and height of the browser window you can sometimes see glimpses of neighbouring tiles. Here you can see a bit of the letters underneath: text, and if i change the browser height by one pixel it disapears.
It seems like if the graphical glitch happens depends on the height/width of the browser window. If you change the height by 1 pixel it disapears, if you change it by one more it comes back.
Does anyone know how to fix this? And if not, should i try to like manually draw the images pixel by pixel or like add a one pixel margin to the tileset?
Canvas has a half-pixel resolution so I guess you could enlarge your crop area by a half pixel and see if that omits the noise.
If that doesn't work you're back to using a larger spritesheet.
If you decide on using a larger spritesheet, here's a double-sized version of your spritesheet that I Photoshopped.
