fillRect() not overlapping exactly when float numbers are used

Question

The following code (jsFiddle) draws a red square at random points on a canvas taking care to erase the previous one (by filling a white square over it with ctx.fillRect()<

Answer 1

The problem stems from the basic way that things are drawn on a canvas. When you draw a square, the edges of the shape are slightly "feathered". Thus when you draw the white box over the previous red box, the remnants of red bleed into the semi-transparent edge.

If you draw 10 white boxes instead of one, the problem goes away. Or if you make the white box probably 0.5 pixels larger, that would likely help.

const ctx = document.getElementById('canvas').getContext('2d');
   let prevRect = null;
   for (let i = 0 ; i < 10; i++) {
     if (prevRect != null) {
       ctx.fillStyle='white';
       ctx.fillRect(prevRect.x - 0.75, prevRect.y - 0.75, 51.5, 51.5);
     }
     ctx.fillStyle='red';
     const newRect = {x: Math.random()*(300-50), y: Math.random()*(300-50)};
     ctx.fillRect(newRect.x, newRect.y, 50, 50);
     prevRect = newRect;
   }

body, html { padding: 0; }

canvas { border: 1px solid black; }

Looks like 0.75 bigger on each side works pretty well, but it's certain to be a function of canvas "logical" size vs. actual screen size.