Desafio da apostila da Casa do Código | JavaScript e HTML: pratique lógica com desenhos, animações e um jogo

Olá! Estou fazendo exercícios da apostila de Logica de Programação da casa do código e estou com dificuldade com a lógica de um desafio. é o seguinte:

4 - Crie seu próprio Paint! Defina áreas do seu canvas em que o usuário pode selecionar algumas cores. Para isso, você deve guardar uma variável corEscolhida fora da sua função de desenho. Toda vez que o usuário clicar na região da escolha de uma cor (você pode fazer isso verificando com ifs), você deve atualizar essa variável e utilizá-la para fazer c.fillStyle = corEscolhida.

O que eu pensei em fazer: colocar 3 quadradinhos, um de cada cor, no canvas e, quando o usuário clicar em algum desses quadradinhos, o "pincel" usado vai mudar de cor, criando ao clique bolinhas da cor em que o usuário clicou.

Enfim, estou com dificuldades de conseguir estruturar esse código e por onde começar. Podem ajudar? Segue código até o momento:

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



<script>





    var tela = document.getElementById("tela");
    var pincel = tela.getContext("2d");

    pincel.fillStyle = "lightgray";
    pincel.fillRect(0, 0, 600, 400);

    function desenhaQuadrado (x, y, cor){

        var tela = document.getElementById("tela");
        var pincel = tela.getContext("2d");


        pincel.fillStyle = cor;
        pincel.fillRect(x, y, 50, 50);

        pincel.strokeStyle = "white";
        pincel.strokeRect(x, y, 50, 50);
    }


    desenhaQuadrado(0,0, "green");
    desenhaQuadrado(0,100, "red");
    desenhaQuadrado(0,50, "blue");


    tela.onclick = function(evento){

        var x = event.pageX - tela.offsetLeft;
        var y = event.pageY - tela.offsetTop;

        pincel.fillStyle = "blue";
        pincel.beginPath();
        pincel.arc(x, y, 10, 0, 2* Math.PI);
        pincel.fill();

        console.log("Posicao do clique: " + x + " , " + y);


    }


    tela.oncontextmenu = function(evento){

        var x = event.pageX - tela.offsetLeft;
        var y = event.pageY - tela.offsetTop;

        pincel.fillStyle = "red";
        pincel.beginPath();
        pincel.arc(x, y, 10, 0, 2* Math.PI);
        pincel.fill();

        console.log("Posicao do clique: " + x + " , " + y);


    }



</script>

Oi, Maria Eugênia! Tudo bom contigo?

Vou colocar um exemplo que está um pouco diferente do que pretende fazer, porém tem a mesma ideia. O que você pode tentar é adaptar ao seu modelo. Será uma boa forma de praticar. ;-)

<canvas width="600" height="400"></canvas>
selecione a cor <input type="color">

<script>
    var paleta = document.querySelector('input');
    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');

    pincel.fillStyle = 'grey';
    pincel.fillRect(0, 0, 600, 400);

    var desenha = false;

    function desenhaCirculo(evento) {

        if (desenha) {
            var x = evento.pageX - tela.offsetLeft;
            var y = evento.pageY - tela.offsetTop;
            pincel.fillStyle = paleta.value; // sempre pega o valor atual da paleta!
            pincel.beginPath();
            pincel.arc(x, y, 10, 0, 2 * 3.14);
            pincel.fill();
        }
        console.log(x + ',' + y);
    }

    tela.onmousemove = desenhaCirculo;

    // atribuindo diretamente a função anônima
    tela.onmousedown = function () {

        desenha = true;
    }

    // atribuindo diretamente a função anônima
    tela.onmouseup = function () {

        desenha = false;
    }

</script>

Espero ter contribuído!

Bons estudos e vamos em frente!!!

Mergulhe em programação