Unwanted lines appearing in html5 canvas using plates

Question

I draw a map on canvas using 40px * 40px squares. Everything is fine, while I, shifting the canvas (using the transformation), scrolls the map. Then out of nowhere lines appear between the plates. See Images below.

Why?

Answer 1

This is similar to floating point positioning (for example, you scrolled to 100.5, 100.5) in combination with bilinear filtering, which most browsers use to display images on a two-dimensional canvas.

Basically, if you draw an image (imageImage () between pixels, each pixel is smoothed by two pixels, which means that the edges paint 50% alpha in the background. This breaks the tile because the next edge of the tile is the same and it paints 50 % alpha over another tile is 50% alpha, which adds up to 75% alpha. It will look lighter or darker (depending on the background color) than the rest of the tile. This way you get "seams" along the edges of the tile.

To fix: Math.round () your image coordinates, as well as any calls to translate () (since half pixel translation has the same effect). This ensures that everything is drawn on a grid with pixel alignment and there will never be seams.