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 Firefox/Opera/IE (right), I get visible edges:

The problem disappears when I use rounded numbers:

ctx.drawImage(img, parseInt(x), parseInt(y), w, h);

But that doesn't help when I use scaling:

ctx.scale(scale); // anything from 0.1 to 2.0

I also tried these, but no change:

1. ctx.drawImage(img, 5, 5, 50, 50, x, y, w, h); // so not an issue of clamping
2. ctx.imageSmoothingEnabled = false;
3. image-rendering: -moz-crisp-edges; (css)

Is there any way to make it work in ff/op/ie?

---

Edit: Partial solution found

Adding 1 pixel to width/height and compensating it by scale (width+1/scale) seems to help:

ctx.drawImage(props.img, 0, 0, width + 1/scale, height + 1/scale);

It makes some artifacts, but I think it's acceptable. On this image, you can see green tiles without edges, and blue windows, which are not compensated, still with visible edges:

Answer 1

The simplest solution (and I'd argue most effective) is to use tiles that have a 1 pixel overlap (are either 1x1 or 2x2 larger) when drawing the background tiles of your game.

Nothing fancy, just draw slightly more than you would normally. This avoids complications and performance considerations of bringing extra transformations into the mix.

For example:

var img = new Image();
img.onload = function () {
    for (var x = 0.3; x < 200; x += 15) {
        for (var y = 0.3; y < 200; y += 15) {
            ctx.drawImage(img, 0, 0, 15, 15, x, y, 15, 15);
            // If we merely use 16x16 tiles instead,
            // this will never happen:
            //ctx.drawImage(img, 0, 0, 16, 16, x, y, 16, 16);
        }
    }
}
img.src = "http://upload.wikimedia.org/wikipedia/en/thumb/0/06/Neptune.jpg/100px-Neptune.jpg";

Before: http://jsfiddle.net/d9MSV

And after: http://jsfiddle.net/d9MSV/1/

---

Note as the asker pointed out, the extra pixel needs to account for scaling, so a more correct solution is his modification: http://jsfiddle.net/d9MSV/3/

Answer 2

Cause

This is caused by anti-aliasing.

Canvas is still work-in-progress and browser has different implementations for handling anti-aliasing.

Possible solutions

1

You can try turning off anti-aliasing for images in Firefox like this:

context.mozImageSmoothingEnabled = false;

In Chrome:

context.webkitImageSmoothingEnabled = false;

and add a class to the element like this (should work with Opera):

canvas {
    image-rendering: optimizeSpeed;             // Older versions of FF
    image-rendering: -moz-crisp-edges;          // FF 6.0+
    image-rendering: -webkit-optimize-contrast; // Webkit
    image-rendering: -o-crisp-edges;            // OS X & Windows Opera (12.02+)
    image-rendering: optimize-contrast;         // Possible future browsers.
    -ms-interpolation-mode: nearest-neighbor;   // IE
}

Here's a browser test I made to see the effect of turning off anti-aliasing:

ANTI-ALIAS BROWSER TEST

2

Translate the whole canvas by 0.5 point.

ctx.translate(0.5, 0.5);

This doesn't always work and might come in conflict with other translations. However you can add a fixed offset each time:

ctx.translate(scrollX + 0.5, scrollY + 0.5);

3

Another option is to do a compromise that you either pad the tiles with one extra pixel which I don't recommend due to the extra work you'll get maintaining this.

4

This method draws the tiles a bit scaled so they overlap:

ctx.drawImage(tile, x, y, 65, 65); //source tile = 64x64

This might be enough to cover the glitch. Combined with turning anti-alias off (or using nearest neighbor) it won't affect much of the tile graphics, but it might reduce performance a tad due to the scaling.

If you turn off anti-aliasing (and that didn't work on its own) the overhead will be minimal as some goes to interpolate the image.

5

Simply draw everything offset -1 position (ie. grid = 63x63). Of course this will screw up everything else regarding checks so...

Answer 3

In every tile draw use Math.floor when there is division involved, like this:

    ctx.drawImage(image,Math.floor(xpos/3),ypos+1)

Also, if you have a loop to draw, that calls itself, always use requestAnimationFrame. I don't know why, but since I moved from timer timeout to requestAnimationFrame I have no more artifacts.

Answer 4

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.