Подскажите, не получается сделать плавную анимацию на canvas. что я хочу : при нажатии мышкой появляется круг который плавно увеличивается в радиусе и при достижении 50 скрывается. у меня же получается обновление только при повторном нажатии мышкой. что я делаю не так??
https://codepen.io/RedSkyby/pen/vrpZbq
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var radius = 20;
canvas.width = window.innerWidth;
canvas.height= window.innerHeight;
// code
canvas.addEventListener('mousedown', function drawCircle(e){
ctx.beginPath();
ctx.arc(e.clientX, e.clientY, radius, 0 , Math.PI * 2);
ctx.closePath();
ctx.fill();
// тут я сбрасываю радиус
radius += 5;
if (radius > 50) {
ctx.clearRect(0,0, mainCanvas.width,canvasHeight);
}
// повториение анимации
requestAnimationFrame(drawCircle);
});