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

i'm drawing game map canvas. ground made of tiles - simple 64x64 png images.

when draw in chrome, looks ok (left), when draw in firefox/opera/ie (right), visible edges:

the problem disappears when use rounded numbers:

ctx.drawimage(img, parseint(x), parseint(y), w, h); 

but doesn't when use scaling:

ctx.scale(scale); // 0.1 2.0 

i tried these, no change:

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

is there way make work in ff/op/ie?

---

edit: partial solution found

adding 1 pixel width/height , compensating scale (width+1/scale) seems help:

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

it makes artifacts, think it's acceptable. on image, can see green tiles without edges, , blue windows, not compensated, still visible edges:

the simplest solution (and i'd argue effective) use tiles have 1 pixel overlap (are either 1x1 or 2x2 larger) when drawing background tiles of game.

nothing fancy, draw more normally. avoids complications , performance considerations of bringing transformations mix.

for example:

var img = new image(); img.onload = function () {     (var x = 0.3; x < 200; x += 15) {         (var y = 0.3; y < 200; y += 15) {             ctx.drawimage(img, 0, 0, 15, 15, x, y, 15, 15);             // if merely use 16x16 tiles instead,             // 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 asker pointed out, pixel needs account scaling, more correct solution modification: http://jsfiddle.net/d9msv/3/