Gente! Fiquei muito feliz com o que fiz. Sei que não é nada excepcional, mas consegui colocar o código para o usuário escolher a cor com a qual quer pintar. Quando a pessoa clica com o botão direito, ela pode escolher a cor Segue o código:
<canvas width="600" height="400"></canvas>
<script>
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
pincel.fillStyle = 'gray';
pincel.fillRect(0,0,600,400);
var cores = prompt('Escolha uma cor (em inglês)');
if(cores !== "color"){
alert('Esta não é uma cor válida');
cores = prompt('Escolha uma cor (em inglês)');
}
var desenha = false
tela.onmousemove = function(evento) {
if(desenha){
var x = evento.pageX - tela.offsetLeft;
var y = evento.pageY - tela.offsetTop;
console.log(evento);
pincel.fillStyle = cores;
pincel.beginPath();
pincel.arc(x,y,10,0,2*3.14);
pincel.fill();
}
}
tela.onmousedown = function() {
desenha = true
}
tela.onmouseup = function() {
desenha = false
}
tela.oncontextmenu = function(){
cores = prompt('Escolha uma nova cor (em inglês)');
return false;
}
</script>
<br>
Com um clique do botão esquerdo de seu você pode escolher uma nova cor