Why ctx.clearRect doesn't works ?

Question

So clearRect seems to be not working when used alone but when beginPath is added after it canvas gets cleared ,so can anyone explain me what is actually happening ?Ty in advance!

https://code.sololearn.com/W3ye8tLtdtra/?ref=app

Answer 1

ctx.clearRect works.
you can check it, the code below works becouse doesn't need a path:

y+= 10;
ctx.fillRect(0, y, 10, 10);

ctx.beginPath is used to create a new drawing path, at the same time it empties all the previous paths, that is, if beginPath is not used before starting a new path it will also draw the previous paths.

Nice animation, have a happy coding day ✌️

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/save

Answer 2

luis calderón ty and happy coding to you as well but the following code draws path as well similar to what I am doing but works fine
window.onload=()=>{
var canvas=document.querySelector("#canva");
var ctx=canvas.getContext("2d");

ctx.rect(0,0,10,20);
ctx.fillStyle="red";
ctx.fill()
ctx.clearRect(0,0,10,20)
}

Also i am wondering if it has something to do with ctx.save and ctx.restore as everything is being drawn inside it so the actual canvas state which is blank is saved and restored again and so clearRect doesn't works? Maybe I am wrong but this is what I understand so far !!