Boa noite, galera!
Estava escrevendo um código para simular um "paint" meia boca no navegador (atividade do curso de lógica II), porém na atividade só é solicitado um campo para a escolha da cor (por meio de um input, como podem ver no código abaixo). O que foi proposto na atividade estava ok, mas tentei dar um plus no meu "paint" incluindo um input para determinar a espessura da linha que seria desenhada (por meio de outro input). A caixa para a entrada do usuário aparece e botão para enviar o texto também. Joguei um parseInt para a variavel só receber número, mas não consigo fazer funcionar. Acredito que seja o input que estou pedindo para a variável buscar, pois ela está iguala variável da paleta de cor ('input'). Não sei como aplicar duas entradas de input, se alguém puder me auxiliar.
Desde já agradeço e um ótimo fim de semana.
<canvas width="600" height="400"></canvas>
<br>
Escolha uma cor <input type="color">
<input/>
<button>Escolha a espessura da linha</button>
<script>
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
var paleta = document.querySelector('input');
var fonte = parseInt(document.querySelector('input'));
var desenha = false;
pincel.fillStyle = 'grey';
pincel.fillRect(0, 0, 600, 400);
function desenhaCirculo(evento) {
if(desenha) {
var x = evento.pageX - tela.offsetLeft;
var y = evento.pageY - tela.offsetTop;
pincel.fillStyle = input.paleta;
pincel.beginPath();
pincel.arc(x, y, fonte.value, 0, 2 * 3.14);
pincel.fill();
console.log(x + ',' + y);
}
}
tela.onmousemove = desenhaCirculo
function habilitarDesenhar() {
desenha = true;
}
function desabilitarDesenhar() {
desenha = false;
}
tela.onmousedown = habilitarDesenhar;
tela.onmouseup = desabilitarDesenhar;
</script>
