Particles Animation Not Working Well

Question

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

i am using javascript Canvas to make a animation effect on mouseover,
means when you start touching in screen particle size will start increase and when you go far from that particle than it will regain its initial size,
But it is not working properly,
means in JavaScript line 58 else statement not running when mouse go far from particle🙁

Please answer As Soon As Possible

Answer 1

Actually, everything is working perfectly, your problem is that you are not clearing the canvas. So the partciples are returning to the right size but you cant tell because the big ones are still there.
Add this to the very top of your animate function:
ctx.clearRect(0, 0, innerWidth, innerHeight);

Happy coding 😉

Ps. You might want to change your canvas position from absolute to fixed. It works better on iOS

Answer 2

You should clear canvas everytime animate is called, otherwise you are just drawing on top of it .

Place the following line at the very top of animate function.

ctx.clearRect(0,0,canvas.width,canvas.height);

Answer 3

Lol Abhay did we post our answers at the same time? 😂

Answer 4

Alternatively, you can try this:
ctx.fillStyle = "rgba(0,0,0,0.05)";
ctx.fillRect(0,0,canvas.width,canvas.height);

Answer 5

Brain & Bones
Abhay
🤯 Thanks, I thought it was a big mistake, but 🙁,
Thank You Very Much

Answer 6

Brain & Bones yes Abhay was just 3,4 second late, that's why i marked Your answer as best

Answer 7

Ok

Answer 8

Gsm

Answer 9

what is the animation in particle.