Gap between shapes after scaling

While using scale in HTML5 canvas, I noticed that sometimes small gaps appear between elements. For example:

开发者_C百科

context.scale(0.995, 1);
context.fillRect(0, 0, 100, 100);
context.fillRect(100, 0, 100, 100);

Without scale, two rectangles are close next to each other, but with scale, there's tiny gap between. Is there some way to get rid of it without rounding scale factor?

---

As said in my comment this is a rendering artefact because of antialiasing. As workaround you may use an off-screen buffer which you render un-scaled and then put that image onto your original canvas with correct scaling turned on. If you do so the line should disappear.

The following snippet might give you an idea:

var buffer = document.createElement('canvas');
buffer.width = 200;
buffer.height = 100;
var context1 = buffer.getContext('2d');
context1.fillRect(0, 0, 100, 100);
context1.fillRect(100, 0, 100, 100);


var canvas = document.getElementById('canvasID');
var context = canvas.getContext('2d');
context.scale(0.995, 1);
context.drawImage(buffer, 0, 0);

context.fillRect(0, 120, 100, 100);
context.fillRect(100, 120, 100, 100);

Compare top two rectangles in my example (off-screen rendering) with the bottom ones which were drawn directly onto the canvas.