clearRect() on a single pixel in html5 canvas doesn't actually set alpha to 0

Question

I am manually painting individual pixels in html5 canvas. I'm only using pure black and pure white. Simplifying only somewhat:

var canvas = document.querySelector(".main-canvas");
var ctx = canvas.getContext('2d');
ctx.imageSmoothingEnabled = false;

var isNonNegativeInteger = function(val) {
  return Number.isFinite(val) && val % 1 === 0 && val >= 0;
};

var paintPixel = function(x, y) {
    if (!isNonNegativeInteger(x) ||
        !isNonNegativeInteger(y) ) {
        debugger;       
    }
    ctx.fillRect( x, y, 1, 1 );
};

var clearPixel = function( x, y ) {
    if (!isNonNegativeInteger(x) ||
        !isNonNegativeInteger(y) ) {
        debugger;       
    }
    ctx.clearRect( x, y, 1, 1 );
};

I am only passing integers in as x and y coordinates. Yes, I'm absolutely sure, I've put in a test.

I'm not manipulating RGB. All the pixels stay black. I'm just manipulating alpha. What I am finding is that after a great deal of painting and clearing, with lots of back-and-forth, there is a faint visual "ghosting" where the black pixels that were set to fully opaque by the fillRect() are not actually having their alpha reset to zero when clearRect() is called.

I know this because when I call ctx.getImageData() in the affected pixel neighborhood, I see low but non-zero alpha values (3, 5, or 12 etc) sprinkled in the pixel data alpha values. This is... crazy-making. Interestingly, I also see some non-255 alpha values for the black pixels, which are also problematic but less visually offensive that the "dirty" whites.

These are big pixel grids, with thousands of draw calls per frame. So I am reluctant to use getImageData() and putImageData() to manually set the alpha because they are slow. The problem is just that clearRect() is not doing what it says on the tin.

Any suggestions very appreciated.

Answer 1

That's really odd, the only cause I can think of would be that your x and y coordinate are not int. Drawing at float position will indeed create an antialiasing artifact, on clearRect too :

var canvas = document.createElement('canvas');
document.body.appendChild(canvas);
var ctx = canvas.getContext('2d');
ctx.textBaseline = "middle"
var paintPixel = function(x, y) {
  ctx.fillRect(x, y, 1, 1);
};
var clearPixel = function(x, y) {
  ctx.clearRect(x, y, 1, 1);
};
var i = 0;
for (i = 0; i < 25; i += .1) {
  paintPixel(i, 10);
  clearPixel(i, 10);
}
ctx.fillText('float', 30, 10)

for (i = 0; i < 25; i++) {
  paintPixel(i, 30);
  clearPixel(i, 30);
}
ctx.fillText('int', 30, 30)
// an other solution could have been to use globalCompositeOperation
var gCOClear = function(x, y) {
  ctx.globalCompositeOperation = 'destination-out';
  ctx.fillRect(x, y, 1, 1);
  ctx.globalCompositeOperation = 'source-over';
}
for (i = 0; i < 25; i += .1) {
  paintPixel(i, 50);
  gCOClear(i, 50);
}
ctx.fillText('gCO float', 30, 50)
for (i = 0; i < 25; i++) {
  paintPixel(i, 70);
  gCOClear(i, 70);
}
ctx.fillText('gCO int', 30, 70)

So the solutions are : either you round your coordinates before drawing, either your clear slightly bigger than you drawn.

But as you specified that you are absolutely sure to be "only passing integers in as x and y coordinates", this is probably not your issue...

Also, note that sadly, ctx.imageSmoothingEnabled has no effect on drawing methods like fillRect() and clearRect()