Stack Exchange
Draw Multiple Circles Horizontally HTML5
How can I draw multiple circles horizontally aligned with this code? I have tried with a loop but to no avail.       
 <!doctype html>
    <html>
    <head>

        <title> Draw circle </title>

    <body>
    <canvas id="myCanvas" width="500" height="300" style="border:solid 2px white;">
    </canvas>
    <script>

    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");

    function draw_circle (circleX, circleY, radius, fill) { 
        context.fillStyle = "black";
        context.fillRect(0, 0, 500, 300);

        context.strokeStyle = "red";
        context.strokeRect(5, 5, 490, 290);

        context.fillStyle = fill;
        context.arc(circleX, circleY, radius, 0, Math.PI*2);
        context.fill();
    }

    draw_circle(100, 100, 30 , "cyan");
    </script>
    </body>
    </html>


Your draw_circle function is filling the canvas with black each time it is called. You should only be running that code once.

Got it , Thank you for your correction :)

<canvas id="myCanvas" width="500" height="300" style="border:solid 2px white;">
    </canvas>
    <script>

    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");

    function drawWindow(){
        context.fillStyle = "black";
        context.fillRect(0, 0, 500, 300);

        context.strokeStyle = "red";
        context.strokeRect(5, 5, 490, 290);

    }
    function draw_circle (circleX, circleY, radius, fill) { 

        context.fillStyle = fill;
        context.arc(circleX, circleY, radius, 0, Math.PI*2);
        context.fill();
    }
    drawWindow();
    for(var i = 0; i <= 3 ; i++){
        draw_circle((i*60)+100,100, 30 , "cyan");
    }

    </script>


Thanks for the answer and post user3087839 , it works :)
