html - Gap between shapes after scaling

Question

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

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?

Answer 1

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.