Question

I want to do a very simple animation, draw the center point for a circle, followed by slowly drawing a line (the radius) ending with a progressive circle. Now, the circle part works fine, it’s the code for the line that’s just not working as I intend. It just doesn’t stop. Everything triggers when the user clicks a specific area of the canvas.

var lineX = 390;    
canvas.addEventListener('click',ProcessClick,false);
    function ProcessClick(toi){
        var posx = toi.layerX;
        var posy = toi.layerY;
        if(toi.layerX == undefined || toi.layerY == undefined){
            posx = toi.offsetX;
            posy = toi.offsetY;
        }
        if(posx>=315 && posx<=465 && posy>=250 && posy<=300){
            ctx.clearRect(300, 60, 180, 180);
            lineX = 390;
            var interval = setInterval(aniRadio, 50);
        }
    }//ProcessClick

    aniRadio = function(){
        if(lineX == 390){
            ctx.beginPath();
            ctx.arc(390, 150, 4, 0, Math.PI*2, true);
            ctx.closePath();
            ctx.fillStyle = "black";
            ctx.fill();
        }
        ctx.beginPath();
        ctx.moveTo(lineX, 150);
        lineX += 5;
        ctx.lineTo(lineX, 150);
        ctx.closePath();
        ctx.stroke();
        if(lineX == 465){
            clearInterval(interval);//tried calling another function that just contains this line. No luck either.
        }
    }

I basically want the interval to stop itself once the line reaches a point, so then I can call the function that draws the circle.

Answer 1

You need to get var interval declaration outside the ProcessClick function. This way, it is declared as a local variable, and it is undefined in aniRadio.

var interval;
function ProcessClick() {
  // ...
  interval = setInterval(aniRadio, 50);
}
aniRadio = ...