circulos usando loops

Saludos

Mediante la función .arc() para definir circulos, se puede utilizar loops para graficar cada uno de los circulos adyacentes. También, dado que se requieren circulos de iguales dimensiones, la variable radio en la función se puede omitir.

<canvas width="600" height="400">
</canvas>

<script>
    var screen = document.querySelector("canvas");
    var pencil = screen.getContext("2d");

    pencil.fillStyle = "gray";
    pencil.fillRect(0,0,600,400);

    circle_draw = function(x,y, color){
        pencil.fillStyle = color;
        pencil.beginPath();
        //Definir un radio estandar
        pencil.arc(x,y,20,0,2*Math.PI);
        pencil.fill()}

//Lista de colores
   colors = ["black","green","yellow","red","blue"]
   //Parametros de posición
    x = [300,300,300,340,260];
    y = [200,240,160,200,200];
    for(var i = 0; i<colors.length;i++){
        circle_draw(x[i],y[i],colors[i])}
</script>