Resolução do exercício e aprimoração do próprio [COMENTADO]

O exercício está resolvido e com a implementação de que agora será indicado para o usuário a cor que ele está utilizando naquele momento de forma bem dinâmica e prática. Alguns poucos conhecimentos de HTML e CSS que eu tenho foram utilizados, mas comentei da forma que podia pra tentar dar um norte mesmo para aqueles que não tem noção alguma do que seria uma tag "div" ou outras coisas que utilizei ao longo do código. Espero que consigam até mesmo ver mais algumas funções para usarem em seus estudos, com isso. Qualquer dúvida é só colocarem nos comentários. Aqui está:

<meta charset="UTF-8"> <!-- Apenas para não perder o hábito -->

<canvas width="600" height="400"></canvas> <br><br> <!-- A tag que definirá o espaço onde teremos a nossa tela para desenhos e o <br> para dar espaço entre a tela e a div que vem logo abaixo. -->

<div></div>  <!-- Uma tag div para marcar a região onde iremos escrever algo. Nesse caso, será o aviso de qual cor estamos utilizando naquele momento. -->

<script>
var tela = document.querySelector("canvas"); // Faz o JS reconhecer o nosso canvas para que possamos trabalhar com ela.
var pincel = tela.getContext("2d"); // Adiciona o nosso agente principal para fazer os designs na tela que agora já é reconhecida pelo JS.
var informa = document.querySelector("div"); // Faz o JS reconhecer o nosso espaço usado para avisar o usuário da cor que ele está usando.
var cores = ["blue", "red", "green"]; // Um array com as cores que serão usadas tanto nas bolinhas quanto no aviso para o usuário.
var nomes = ["Azul", "Vermelho", "Verde"]; // Os nomes que irão mudar dinamicamente quando o usuário clicar com o botão direito.
var i = 0; // Variável para que todas as trocas de cores ocorrão simultaneamente nos códigos seguintes.
informa.innerHTML = nomes[i]; // Escreve os elementos do array relativo à variável "i" dentro do espaço da div (recebido na var "informa").
informa.style.background = cores[i]; // Muda a cor do fundo da nossa div também relativo ao valor de "i".
informa.style.width = "auto"; // Faz com que a largura dos nossos elementos dentro da div seja definida automaticamente.
informa.style.color = "white"; // Muda a fonte dos textos dentro da div para branco.
informa.style.font = "normal 15pt arial"; // Altera a fonte e outras características do texto. Ex.: (estilo, tamanho, fonte)
informa.style.textAlign = "center"; // Alinha o texto conforme o seu fundo. Nesse caso, "center" centraliza ele com o background.
informa.style.borderRadius = "30px"; // Faz com que as bordas sejam arredondadas e não quadradas.
informa.style.margin = "auto"; // Centraliza os elementos dentro da div bem no centro da página.


pincel.fillStyle = "lightgrey"; // Define a cor do nosso "pincel" para cinza claro.
pincel.fillRect(0, 0, 600, 400); // Desenha o nosso retângulo. Ex.: (x, y, largura, altura)

    function bolinhas(evento){ // Criação da função "bolinhas" com parâmetro evento para que seja possível obter as coordenadas dos cliques.
        var x = evento.pageX - tela.offsetLeft; // Variável que recebe a coordenada do eixo x (abscissa).
        var y = evento.pageY - tela.offsetTop; // Variável que recebe a coordenada do eixo y (ordenada).

        pincel.fillStyle = cores[i]; // Muda a cor do pincel para as bolinhas conforme o valor de "i" for sendo alterado pelo usuário.
        pincel.beginPath(); // Inicia um trajeto para que o pincel possa fazer os desenhos de forma correta e sem erros.
        pincel.arc(x, y, 10, 0, 2*3.14); // Cria um círculo. Ex.: (x, y, raio, ângulo inicial, ângulo final em radiano).
        pincel.fill(); // Preenche o espaço delimitado pelo comando anterior com a cor definida - assim gerando um círculo.
    }

    function colorchange(cor){ // Função responsável por alterar as cores e as palavras conforme o clique com o botão direito.
        i++; // Variável que vai alterando conforme os cliques, assim também mudando as cores de forma automática e dinâmica.
        informa.style.background = cores[i]; // Muda a cor do fundo do aviso para a mesma cor que será utilizada.
        informa.innerHTML = nomes[i] // Muda o nome da cor do aviso. Tipo "azul", "vermelho" e etc.


            if (i > cores.length-1){ // Condição para acontecer caso o a varíavel "i" se torne maior do que a quantidade de elementos. Como cores.length nos traria o valor 3, mas "i" só pode chegar a 2, resolvi apenas subtrair 1 para facilitar as coisas.
                i = 0; // Já que o "i" iria se tornar maior do que a quantidade de elementos do array "cores", fazemos ele voltar a ser 0.
                informa.style.background = cores[i]; // Volta para a primeira cor (azul).
                informa.innerHTML = nomes[i]; // Volta para o primeiro nome de cor (também o "azul").
            }
    }

tela.onclick = bolinhas; // Chama a função "bolinhas" assim que o usuário clicar sobre a tela.
tela.oncontextmenu = colorchange; // Chama a função "colorchange" assim que o usuário clicar com o botão direito sobre a tela.

</script>