Hah! It’s almost funny that so fundamental topic like this can be discussed this much but here I am to add more to this discussion after @miro.vasil and @jacqueline-bosco, just because @klyni_gg initiated this!!
Well, Helloo!!! 
If you’re working with composite operations and find that clearRect isn’t behaving as expected, a common culprit might be your globalCompositeOperation. Make sure to set it back to 'source-over' before attempting to clear:
JavaScriptctx.globalCompositeOperation = 'source-over';
ctx.clearRect(0, 0, canvas.width, canvas.height);
This simple step ensures the clear operation works normally, truly clearing the pixels instead of blending them with what’s beneath. It’s a subtle but vital detail for predictable canvas behavior.
Hope this puts a full stop to this. Thank you.