Eu encontrei uma solução na forma mais simples e intuitiva:

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

<script>

    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
    pincel.fillStyle = 'lightgray';
    pincel.fillRect(0, 0, 600, 400);

    function desenhaCirculo(x, y, raio, cor) {

        pincel.fillStyle = cor;
        pincel.beginPath();
        pincel.arc(x, y, raio, 0, 2*3.14);
        pincel.fill();
    }


    desenhaCirculo(300, 160, 20, 'yellow');
    desenhaCirculo(300, 200, 20, 'red');
    desenhaCirculo(300, 240, 20, 'blue');
    desenhaCirculo(340, 200, 20, 'black');
    desenhaCirculo(260, 200, 20, 'orange');

</script>

Depois, olhando para o código, identifiquei um padrão e resolvi criar funções só para por em prática alguns dos ensinamentos do curso e apesar de possuir mais linhas de código eu acho que ficou melhor.

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

<script>

    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
    pincel.fillStyle = 'lightgray';
    pincel.fillRect(0, 0, 600, 400);

    function desenhaCirculo(x, y, raio, cor) {

        pincel.fillStyle = cor;
        pincel.beginPath();
        pincel.arc(x, y, raio, 0, 2*3.14);
        pincel.fill();
    }

    function desenhaColunaCentral(x, raio) {

        cores = ['yellow', 'red', 'blue']
        var y = 160;
        var tamanho = cores.length; 

        for (var i = 0; i < tamanho; i++) {

            desenhaCirculo(x, y, raio, cores[i]);
            y += 40;       

        }

    }

    function desenhaLinhaCentral(y, raio) {

        cores = ['black', 'orange']
        var x = 260;
        var tamanho = cores.length; 

        for (var i = 0; i < tamanho; i++) {

            desenhaCirculo(x, y, raio, cores[i]);
            x += 80;       

        }

    }

    var raio = 20;
    desenhaColunaCentral(300, raio);
    desenhaLinhaCentral(200, raio);


</script>