Удалить пробелы, которые появляются между прямоугольниками на холсте

Question

Я визуализирую прямоугольник непрерывно один за другим на холсте.Это создает некоторые пробелы между прямоугольниками, когда значения прямоугольников находятся в значении с плавающей запятой.

Пожалуйста, найдите изображение ниже.

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.save();
ctx.beginPath();
ctx.moveTo(20.5, 20.5);
ctx.arcTo(20.5, 20.5, 100.5, 20.5, 0);
ctx.arcTo(100.5, 20.5, 100.5, 70.5, 0);
ctx.arcTo(100.5, 70.5, 20.5, 70.5, 0);
ctx.arcTo(20.5, 70.5, 20.5, 20.5, 0);
ctx.closePath();
ctx.fill();


ctx.beginPath();
ctx.moveTo(100.5, 20.5);
ctx.arcTo(100.5, 20.5, 180.5, 20.5, 0);
ctx.arcTo(180.5, 20.5, 180.5, 70.5, 0);
ctx.arcTo(180.5, 70.5, 100.5, 70.5, 0);
ctx.arcTo(100.5, 70.5, 100.5, 20.5, 0);
ctx.closePath();
ctx.fill();
ctx.restore();

<canvas id="myCanvas" width="600" height="250" style="border:1px solid #d3d3d3;">
</canvas>

Подскажите, пожалуйста, как это преодолеть.

Answer 1

Вы сказали это сами, есть значения с плавающей точкой. Если вы удалите десятичные дроби, вы больше не увидите пробелы. Но если вы действительно не можете изменить свои значения, возможно, вы можете попробовать добавить это:

ctx.translate(0.5,0.5);

jsfiddle