Oi pessoal! Com tanta coisa que estou aprendendo a fazer com o canvas, tentei fazer um projeto parecido com o paint. Porém, acho que já me esqueci como usar corretamente o prompt. Queria que o usuário pudesse escolher uma opção de ferramenta e cor, mas a variável dessas respostas aparecem como não definidas quando digito. Alguem consegue me explicar onde errei(ou se não fez sentido algum)? Seque o script, incompleto, do que fiz até agora
<canvas width="800" height="500"></canvas>
<br>
Escolha uma cor <input type="color">
<script>
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
var paleta = document.querySelector('input');
pincel.fillStyle = 'white';
pincel.fillRect(0, 0, 800, 500);
pincel.strokeStyle = 'black';
pincel.strokeRect(0, 0,800, 500);
var desenha = false;
function desenhaPincel(evento) {
if(desenha){
var x = evento.pageX - tela.offsetLeft;
var y = evento.pageY - tela.offsetTop;
pincel.fillStyle = paleta.value;
pincel.beginPath();
pincel.arc(x, y, 5, 0, 2 * 3.14);
pincel.fill();
}
}
function naoClica (){
desenha = false;
}
function clica(evento){
desenha = true;
if(evento.shiftKey){
pincel.fillStyle = 'white';
pincel.fillRect(0, 0, 800, 500);
pincel.strokeStyle = 'black';
pincel.strokeRect(0, 0, 800, 500);
}
}
function desenhaCirculo(){
var x = evento.pageX - tela.offsetLeft;
var y = evento.pageY - tela.offsetTop;
pincel.fillStyle = 'corEscolhida';
pincel.beginPath();
pincel.arc(x, y, 20, 0, 2 * 3.14);
pincel.fill();
}
alert('Clique com o botão direito do mouse para escolher a ferramenta. Para zerar a tela, clique com o botão esquerdo pressionando SHIFT');
function escolhaDesenho(evento){
var ferramenta = parseInt(prompt("O que você gostaria de usar? Temos: 1-pincel, 2-circulo, 3-quadrado e 4-triângulo. Digite apenas o número da ferramenta desejada."));
}
tela.onmousemove = desenhaPincel;
tela.oncontextmenu = escolhaDesenho;
tela.onmousedown = clica;
tela.onmouseup = naoClica;
console.log(ferramenta);
</script>