Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

addEventListener

Olá, implementei a expressão "addEventListener", porém apenas três a implementação que chama a função "modificaTamanho" não está funcionando, gostaria de ajuda para achar o erro.

<canvas width="1600" height="900"></canvas>
<br>
selecione a cor <input type="color">
<script>
    var paleta = document.querySelector('input');
    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');


    pincel.fillStyle = 'grey';
    pincel.fillRect(0, 0, 1600, 900);
    var desenha = false;
    var raio = 10;

    function desenhaCirculo(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, raio, 0, 2 * 3.14);
        pincel.fill();
        //console.log(x + ',' + y);
        }
    }

    function modificaTamanho(evento){
        console.log(evento.keyCode);
        if (evento.keyCode == "16" && raio < 30) {  

           raio += 10;
        }
        if (evento.keyCode == "18" && raio > 5) {

            raio -= 5;
        }
    }



    function habilitaDesenha() { 
        desenha = true;

    }

    function desabilitaDesenha() {
        desenha = false;
    }

    tela.addEventListener("mousemove",desenhaCirculo);
    tela.addEventListener("keypress",modificaTamanho); 
    tela.addEventListener("mousedown",habilitaDesenha);
    tela.addEventListener("mouseup",desabilitaDesenha);

</script>
1 resposta
solução!

Apenas no modificaTamanho use window.addEventListener .

Algumas teclas funcionam apenas se utilizar "keydown".