Ficou Interessante ... Quase um Paint kkkk

Galera,

Fiz sem olhar a resolução do professor e gostei muito do resultado.

Revisei várias coisas que aprendi nos cursos de lógica I e II.

Agradeço a interação no fórum.

Sucesso a todos!

<canvas width="805" height="605"> </canvas>

<script>

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

    pincel.fillStyle = "lightgrey";
    pincel.fillRect (0, 0, 70, 600);


function desenhaRetangulo (x, y, larg, alt, cor) {

    pincel.fillStyle = cor;
    pincel.fillRect (x, y, larg, alt);
    pincel.fillStyle = "black";
    pincel.strokeRect (x, y, larg, alt);
}

function desenhaEspessuraLinha(x, y, larg, alt, cor) {

    pincel.fillStyle = cor;
    pincel.fillRect (x, y, larg, alt);
}

function escreveTexto (texto, x, y, fonte, cor) {

    pincel.fillStyle = cor;
    pincel.fillFont = fonte;
    pincel.fillText (texto, x, y);
}

function limparTela () {
    pincel.clearRect(71, 5, 729, 595);
}

function desenhaCirculo (evento) {

    if (desenhar){
        var x = evento.pageX - tela.offsetLeft;

        var y = evento.pageY - tela.offsetTop;

        if (x >= 0 && x <=79 || x >= 791 && x <= 805 || y >= 0 && y <= 14 || y >= 591 && y <= 605){
            desabilitaDesenhar();
        } else {
            pincel.fillStyle = corCirculo;
            pincel.beginPath();
            pincel.arc (x, y, raio, 0, 2*3.14);
            pincel.fill();
        }    
    }
}


function mudarFuncao (evento) {

    var xfuncao = evento.pageX - tela.offsetLeft;
    var yfuncao = evento.pageY - tela.offsetTop;

    if (xfuncao >= 10 && xfuncao <= 60 && yfuncao >= 10 && yfuncao <= 60){ //(10, 10, 50, 50, "red"); // botão vermelho

        corCirculo = "red";
    }

    if(xfuncao >= 10 && xfuncao <= 60 && yfuncao >= 70 && yfuncao <= 120){ // 10, 70, 50, 50, "blue"); // botão azul

        corCirculo = "blue";
    }

    if (xfuncao >= 10 && xfuncao <= 60 && yfuncao >= 130 && yfuncao <= 180){ // (10, 130, 50, 50, "green"); // botão verde

        corCirculo = "green";
    }

    if (xfuncao >= 10 && xfuncao <= 60 && yfuncao >= 190 && yfuncao <= 240){ // (10, 190, 50, 50, "black"); // botão preto

        corCirculo = "black";
    }

    if (xfuncao >= 10 && xfuncao <= 60 && yfuncao >= 250 && yfuncao <= 300){ // (10, 250, 50, 50, "yellow"); // botão amarelo

        corCirculo = "yellow";
    }

    if (xfuncao >= 10 && xfuncao <= 60 && yfuncao >= 550 && yfuncao <= 580){ // (10, 550, 50, 30, "white"); // botão apagar tela

        limparTela ();
    }

    if (xfuncao >= 10 && xfuncao <= 60 && yfuncao >= 353 && yfuncao <= 558){ // (10, 353, 50, 5, corCirculo); // tamanho linha 5 (raio = 3)

        raio = 3;
    }

    if (xfuncao >= 10 && xfuncao <= 60 && yfuncao >= 369 && yfuncao <= 379){ // (10, 369, 50, 10, corCirculo); // tamanho linha 10 (raio = 5)

        raio = 5;
    }

    if (xfuncao >= 10 && xfuncao <= 60 && yfuncao >= 390 && yfuncao <= 405){ // (10, 390, 50, 15, corCirculo); // tamanho linha 15 (normal raio = 10)
        raio = 10;
    }

    desenhaEspessuraLinha (10, 353, 50, 5, corCirculo); // tamanho linha 5 (raio = 3)

    desenhaEspessuraLinha (10, 369, 50, 10, corCirculo); // tamanho linha 10 (raio = 5)

    desenhaEspessuraLinha (10, 390, 50, 15, corCirculo); // tamanho linha 15 (normal raio = 10)
}


function habilitaDesenhar () {

    desenhar = true;
}

function desabilitaDesenhar () {

    desenhar = false;
}

var corCirculo = "black";
var raio = 10;
var desenhar = false;

desenhaRetangulo (10, 10, 50, 50, "red"); // botão vermelho

desenhaRetangulo (10, 70, 50, 50, "blue"); // botão azul

desenhaRetangulo (10, 130, 50, 50, "green"); // botão verde

desenhaRetangulo (10, 190, 50, 50, "black"); // botão preto

desenhaRetangulo (10, 250, 50, 50, "yellow"); // botão amarelo

desenhaRetangulo (10, 550, 50, 30, "white"); // botão amarelo //(xfuncao >= 10 && xfuncao <= 60 && yfuncao >= 550 && yfuncao <= 580){


desenhaEspessuraLinha (800, 0, 5, 605, "black"); // borda lateral direita

desenhaEspessuraLinha (0, 600, 805, 5, "black"); // borda de baixo

desenhaEspessuraLinha (0, 0, 805, 5, "black"); // borda de cima


desenhaEspessuraLinha (10, 353, 50, 5, corCirculo); // tamanho linha 5 (raio = 3)

desenhaEspessuraLinha (10, 369, 50, 10, corCirculo); // tamanho linha 10 (raio = 5)

desenhaEspessuraLinha (10, 390, 50, 15, corCirculo); // tamanho linha 15 (normal raio = 10)



escreveTexto ("Espessura", 11, 330, "15px Georgia", "black");
escreveTexto ("da Linha", 14, 342, "15px Georgia", "black");


escreveTexto ("Limpar", 18, 563, "15px Georgia", "black");
escreveTexto ("Tela", 23, 573, "15px Georgia", "black");

tela.onclick = mudarFuncao;

tela.onmousemove = desenhaCirculo;

tela.onmousedown = habilitaDesenhar;

tela.onmouseup = desabilitaDesenhar;

</script>