Noto una extraña interacción entre clearRect, fillRect y drawImage. Se explica mejor con una demostración: https://jsfiddle.net/tf950zpd/13/ Código:

 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>

La expectativa es que el suavizado siempre esté deshabilitado cuando hago clic en "dibujar B".

Si hace clic en dibujar B dos veces, el suavizado está deshabilitado por primera vez, pero el suavizado está habilitado por segunda vez. Si hace clic en "dibujar A" y luego en "dibujar B", funciona nuevamente por una vez, pero aún tiene habilitado el suavizado por segunda vez.

Mi pregunta es por qué no funciona como se esperaba y cómo lo soluciono.