I notice some weird interaction between clearRect, fillRect and drawImage. It's best explained by a demo: https://jsfiddle.net/tf950zpd/13/ Code:

const c1 = document.getElementById("a").getContext("2d");
const c2 = document.getElementById("b").getContext("2d");
c1.imageSmoothingEnabled = false;
c2.imageSmoothingEnabled = false;
c1.fillStyle = "white";
c1.fillRect(0,0,2,2);
c1.fillStyle = "black";
c1.fillRect(0,0,1,1);
c1.fillRect(1,1,1,1);

document.getElementById("b1").onclick = function() {
    c1.fillRect(0,0,1,1);
}
document.getElementById("b2").onclick = function() {
  c2.clearRect(0,0,100,100);
    c2.drawImage(c1.canvas, 0,0,2,2,0,0,100,100);
}

Html:

<div id="banner-message">
<button id="b1">
  draw A
</button>
<button id="b2">
  draw B
</button>
<canvas id="a" width="2" height="2"></canvas>
<canvas id="b" width="100" height="100"></canvas>
</div>

The expectation is that the smoothing is always disabled when I click "draw B".

If you click draw B twice, it has smoothing disabled for the first time, but smoothing enabled for the second time. If you click "draw A", and then "draw B", it works again for once, but still has smoothing enabled for the second time.

My question is why it doesn't work as expected and how do I fix it?