fazer um programa similar ao photoshop?

oi José Augusto

Sim! É perfeitamente possível e basta seguir esse mesmo esquema do exercício que desenha de diferentes cores. Quando clicarem na caneta, você deve modificar uma variável para lembrar que agora é a caneta que está valendo. Isso é: guardar o estado, assim como você guarda a cor selecionada!

Oi José! Primeiramente, fico energizado pelo seu entusiasmo. Me faz lembrar quando comecei a dar meus primeiros passos na programação. Inclusive até hoje aprendo coisas novas.

Pegando o que o Paulo disse, a solução não é tão trivial como você mesmo já imaginou. No entanto, ele não é tão complicada.

Sendo assim, vou compartilhar com você um código que lança uma luz sob o problema para que você continue nessa maratona de descoberta.

<style>
.pincel {
    cursor: url('https://www.iconexperience.com/_img/g_collection_png/standard/64x64/pencil.png'), default;
}
</style>

<canvas width="400" height="400"></canvas>    
<br>
<button>Tira ou coloca o icone do pincel</button>

<script>
    function exibeOuNaoPincel() {

        var tela = document.querySelector('canvas');
        tela.classList.toggle('pincel');
    }

    var botao = document.querySelector('button');
    botao.onclick = exibeOuNaoPincel;

</script>

Há uma novidade nesse código que é a a tag style. Essa tag é especial e permite aplicar um estilo (aparência) diferente em vários elementos da página. No caso, criei uma classe chamada .pincel. Entenda que uma classe é um valor que eu posso usar depois para aplicar uma aparência bem legal nos elementos da minha página.

Qual é a ideia? É através de alguma ação do usuário, eu aplicar essa classe em algum elemento. No caso, se essa classe é aplicada em canvas, o cursor do mouse exibirá um pincel. Se ela for removida, o cursor voltará ao normal.

No caso, o teste faz o seguinte. Quando você clicar no botão ele vai tirar ou colocar a classe. É por isso que o método exibeOuNaoPincel pega a tela e faz tela.classList.toggle('pincel'). Se a classe estiver no canvas, ela é removida, se não estiver, ela é colocada.

Fiz questão de colocar esse trecho de código para que você também perceba que JavaScript possui relação com CSS. Inclusive a Alura lhe preparará muito bem caso precise aumentar seus conhecimentos de CSS.

Agora é com você. Quebrar a cabeça um pouquinho e adaptar como você já fez em outras ocasiões que nos encontramos aqui a técnica aqui exibida com seu código.

Sucesso e bom estudo meu aluno!

Ah, quando terminar o segundo curso de lógica. Se você se identificou com a linguagem JavScript e quer ficar melhor do que ja é, confira esse curso

https://cursos.alura.com.br/course/javascript-programando-na-linguagem-web

Ele lhe dará uma base boa para poder continuar e, quem sabe, em um futuro próximo, você estar cursando os cursos mais avançados.

Sucesso e bom estudo.

insira seu código aquiObrigado Flavio e Paulo pela dicas!