Question

I am trying to create an application in jQuery (I am new to in this) where circles appear randomly in canvas every second. I generate them in a for loop but dont know how to make them appear after some elapsed time. I tried using setInterval() and delay() but it didnt work (I think my syntax wasnt well written). Sorry if this question is too basic.

Here is my code:

var canvas, ctx;
var circles = [];
var selectedCircle;
var hoveredCircle;

function Circle(x, y, radius){
    this.x = x;
    this.y = y;
    this.radius = radius;
}

function clear() { // clear canvas function
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}

function drawCircle(ctx, x, y, radius) { // draw circle function
    ctx.fillStyle = 'rgba(255, 35, 55, 1.0)';
    ctx.beginPath();
    ctx.arc(x, y, radius, 0, Math.PI*2, true);
    ctx.closePath();
    ctx.fill();
}

$(function(){
    canvas = document.getElementById('scene');
    ctx = canvas.getContext('2d');

    var circleRadius = 15;
    var width = canvas.width;
    var height = canvas.height;

    var circlesCount = 60; // we will draw 60 circles randomly
    for (var i=0; i<circlesCount; i++) {
        var x = Math.random()*width;
        var y = Math.random()*height;    
        circles.push(new Circle(x,y,circleRadius));
        drawCircle(ctx, circles[i].x, circles[i].y, circleRadius);
    }
});

Thanks for any help!

EDIT: Here are few examples that didnt work:

delay(1000) // after drawing function
drawCircle(ctx, circles[i].x, circles[i].y, circleRadius).delay(1000);
setInterval(drawCircle(ctx, circles[i].x, circles[i].y, circleRadius) {
}, 2000);
drawCircle(ctx, circles[i].x, circles[i].y, circleRadius).delay(1000).setInterval(1000);

Answer 1

Try below solution. Read the comment for more details

$(function(){
    canvas = document.getElementById('scene');
    ctx = canvas.getContext('2d');

    var circleRadius = 15;
    var width = canvas.width;
    var height = canvas.height;
    var timer, index = 0;

    var circlesCount = 60; // we will draw 60 circles randomly
    for (var i=0; i<circlesCount; i++) {
        var x = Math.random()*width;
        var y = Math.random()*height;    
        circles.push(new Circle(x,y,circleRadius));
    }

    // draw one circle per second
    timer = setInterval(function(){
        // exit loop when there's no more circles to draw
        if(index >= circles.length) {
             // also clear the timer
             clearInterval(timer);
             return;
        }

        drawCircle(ctx, circles[index ].x, circles[index ].y, (hoveredCircle == index) ? 25 : 15);
        // go to next circle
        index += 1;
    }, 1000);
});