Criando Circulos/Trocando Cores

Fiz o código e ficou bem parecido com o do instrutor

<canvas width="600" height="400"></canvas>
<script>
    var tela = document.querySelector("canvas");
    var pincel = tela.getContext("2d");

    document.querySelector("canvas").style.backgroundColor = "grey";
    tela.style.margin = -tela.offsetLeft; 
    //fazemos isso, pois há uma pequena distancia entre a borda da pagina com o CANVAS, e isso iria trazer o ponto de CLIQUE errado em relação ao CANVAS

    function fazerCirculo(evento){  //chamaremos está função ao CLICAR, e este evento gera um "PARAMETRO" para a função
        var x = evento.pageX - tela.offsetLeft; //para pegarmos a posição do clique usamos as informações do EVENTO(pageX, pageY)
        var y = evento.pageY - tela.offsetTop;  // .offset = distância do elemento para elemento pai mais próximo. podemos usar TOP,LEFT.
        //fazemos isso, pois há uma pequena distancia entre a borda da pagina e o CANVAS, fazendo com que o PONTO do clique seja retornado com o posicionamento apenas dentro do canvas
        console.log(x + "," + y);//mostra os pontos X,Y do clique, no console

        //criação do circulo ao CLICAR
        pincel.fillStyle = cores[corGlobal]; 
        pincel.beginPath();
        pincel.arc(x,y,10,0,2*3.14);
        pincel.fill();
    }

    tela.onclick = fazerCirculo; //chamamos a função ao Clicar na TELA(canvas)

    //trocar de cor a bolinha
    var cores = ["red","blue","green"];
    var corGlobal = 0;

    function torcarCor(){
            corGlobal++;
            if(corGlobal >= cores.length){
                corGlobal = 0;
            }
            return false; //aqui este retorno, para evitar que abra a CAIXA de opções convencional do BROWSER ao clicar com botao direito
    }

    tela.oncontextmenu = torcarCor; //oncontextmenu = é o evento de CLIQUE com o botão DIREITO

</script>