DESENHA CIRCULO, código comentado

<canvas width="600" height="400"></canvas>  <!--criando o canva para poder desenhar-->
<meta charset="UTF - 8"> <!-- para interpretar todos os caracteres-->
<script> //criando o mundo javascript
    var tela = document.querySelector("canvas"); //trazendo o canva para o javascript
    var pincel = tela.getContext("2d"); //criando um pincel em 2d
    pincel.fillStyle = 'lightgray'; //dando cor ao pincel
    pincel.fillRect(0, 0, 600, 400); //criando um retângulo

//criando uma função para facilitar a reultilização do código
    function desenhaCirculo(x , y, raio, cor){
        pincel.fillStyle = cor; //pincel recebe uma cor
        pincel.beginPath(); //reseta o inicio da escrita do pincel
        pincel.arc(x, y, raio, 0, 2 * 3.14);  //criando um circulo usando os parâmetros dados
        pincel.fill(); //preenche o circulo com a ultima cor do pincel
    } 
    var cont = 1;
    var x = 300;
    var y = 160;
    var cor = prompt("qual a cor do "+ cont +" circulo? *cima* "); //pergunta a cor do primeiro circulo

//criando uma repetição para mudar o valor de x e y e perguntar a cor ao usuario conforme a condicional if faz
    while(cont <= 5){
        if(cont == 2){
            cor = prompt("qual a cor do "+ cont +" circulo? *baixo*");
            y = 240;
        }   if(cont == 3){
            cor = prompt("qual a cor do "+ cont +" circulo? *centro*");
                y = 200;
                }   if( cont == 4){
                    cor = prompt("qual a cor do "+ cont +" circulo? *direita*");
                    x = 340;
                }   if(cont == 5){
                        cor = prompt("qual a cor do "+ cont +" circulo? *esquerda*");
                        x = 260;
                    }
        cont++; //acrescento mais um ao contador 

        desenhaCirculo(x, y, 20, cor); //chamo a função desenhaCirculo por 5 vezes dando os parametros diferentes

//espero ter ajudado, instagram: felipednew
    }
</script>