Como resolver este problema?

Vânia,

Poste aqui o que você já tentou fazer para podermos te ajudar :)

Não sei como fazer as bolas azuis.

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

<script>

var desenhaQuadradoVerde = function(x,y){
    var tela = document.getElementById("tela");
    var c = tela.getContext("2d");

    c.fillStyle="blue";
    c.fillRect(x,y,50,50);

    <!-- colocando bordas nos quadrados -->
    c.fillStyle= "black";
    c.strokeRect(x,y,50,50);
}

var desenhaQuadradoVermelho = function(x,y){
    var tela = document.getElementById("tela");
    var c = tela.getContext("2d");

    c.fillStyle="red";
    c.fillRect(x,y,50,50);

    <!-- colocando bordas nos quadrados -->
    c.fillStyle= "black";
    c.strokeRect(x,y,50,50);
}

    <!--desenhaQuadradoVerde(0,0);-->
    <!--desenhaQuadradoVerde(100,100);-->

    <!--var x = 0;
    <!--while(x <= 600){
        <!--desenhaQuadradoVerde(x,0);
        <!--x = x + 50; }-->

    for (var x = 0; x <= 600; x = x + 50) {
        desenhaQuadradoVerde(x,0);
        desenhaQuadradoVermelho(x,50);

    };
</script>

Vania, o canvas possui um método chamado arc, que recebe como parametro (posicaoX, posicaoY, raioDoCirculo, inicioDoCirculoEmGraus, 2 * Math.PI);

O 2 * Math.PI representa o fim do círculo, nesse caso um círculo completo, se fosse 3/4 de círculo seria 1.5 * Math.PI, meio círculo 1 * Math.PI. Pelo que testei, acima de 2 ele apenas completa o círculo.

Ficou claro?

Ficou sim, obrigada.