O pre-alpha do paint

Brincando com o código fiz algumas alterações que se tornam necessárias para que o usuário possa compreender sem dizer uma única palavra, qual é a região que ele terá para desenhar e, coloquei no canto superior direito qual cor esta selecionada. Nessa implementação encontrei um bug em que, ao desenhar um retângulo após existir algum desenho do usuário, ele pintava esse último círculo e encontrei uma solução, gerando um novo path e colocando na posição inicial e com raio 0, 0, ou seja, sem desenho.

Até que ficou bonitinho. haha

<meta charset="UTF-8">

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

<script>

    function desenhaQuadrado(x, y, tamanho, cor, corBorda) {
        if (corBorda == null) corBorda = 'white';

        pincel.fillStyle = cor;
        pincel.fillRect(x, y, tamanho, tamanho);
        pincel.fill();
    }

    function desenhaRetangulo(x, y, tamanhoX, tamanhoY, cor) {
        pincel.fillStyle = cor;
        pincel.fillRect(x, y, tamanhoX, tamanhoY);
        pincel.fill();
    }

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

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

    }
    // remove um bug em que o último círculo desenhado na tela pega a nova cor selecionada ao executar o pincel.fill()
    function limpaArco(){
        pincel.arc(0,0,0,0,0); 
    }

    function desenhaPaletaDeCores() {
        desenhaRetangulo(0, 0,600, 50, "darkgrey");
        desenhaQuadrado(xVermelho, yQuadrados, tamanhoQuadrados, 'red');
        desenhaQuadrado(xVerde, yQuadrados, tamanhoQuadrados, 'green');
        desenhaQuadrado(xAzul, yQuadrados, tamanhoQuadrados, 'blue');
        pincel.font = "20px Arial";
        pincel.fillStyle = "black"; 
        pincel.fillText("Cor Atual: ",450,32, 150);
        selecionaCor();
    }

    function lidaComMovimentoDoMouse(evento) {

        mouseX = evento.pageX - tela.offsetLeft;
        mouseY  = evento.pageY - tela.offsetTop;

        if(desenha) {
            if (mouseY > tamanhoQuadrados + margem) {
                desenhaCirculo(mouseX, mouseY, 5, corAtual);
            } 
        }
    }

    function selecionaCor(){
        if ( (mouseX >= 0) && (mouseX <= xVerde) ){
            corAtual = "red";
        }
        if ((mouseX > xVerde) && (mouseX <= xAzul)){
            corAtual = "green";
        }
        if ((mouseX > xAzul) && (mouseX <= xAzul+tamanhoQuadrados)){
            corAtual = "blue";
        }

        pincel.beginPath();
        limpaArco();
        desenhaQuadrado(550,12, tamanhoQuadrados/2,corAtual); //desenha a cor selecionada
    }

    function habilitaDesenhar() {
        if (mouseY < tamanhoQuadrados){
            selecionaCor();
        } else {
            desenha = true;
        }
    }

    function desabilitaDesenhar() {

        desenha = false;
    }

    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
    pincel.fillStyle = 'lightgray';
    pincel.fillRect(0, 0, 600, 400);
    var mouseX;
    var mouseY;
    var margem = 5;
    var desenha = false;
    var corAtual = 'red';
    var xVermelho = 0;
    var xVerde  = 50;
    var xAzul = 100;
    var yQuadrados = 0;
    var tamanhoQuadrados = 50;

    desenhaPaletaDeCores(); // mostra os quadrados de seleção de cores

    tela.onmousemove = lidaComMovimentoDoMouse;

    tela.onmousedown = habilitaDesenhar;

    tela.onmouseup = desabilitaDesenhar;

</script>