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

como consigo aumentar ou diminuir as bolinhas sem elas crescerem demais

<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;
        if (evento.shiftKey) {

           raio = raio + 10;
        }
        if (evento.altKey) {

            raio = raio - 5;
        }
        pincel.fillStyle = paleta.value;
        pincel.beginPath();
        pincel.arc(x, y, raio, 0, 2 * 3.14);
        pincel.fill();
        console.log(x + ',' + y);
        }
    }

    tela.onmousemove = desenhaCirculo;

    function habilitadesenha() { 
        desenha = true;
    }

    function desabilitadesenha() {
        desenha = false;
    } 

    tela.onmousedown = habilitadesenha;

    tela.onmouseup = desabilitadesenha;
</script>
1 resposta
solução!

Olá, você pode adicionar outra condição para que ocorra o aumento da bolinha, aproveitei e fiz o mesmo a respeito da redução, por exemplo:

  if (evento.shiftKey && raio < 30) {

           raio = raio + 10;
        }
  if (evento.altKey && raio > 5) {

            raio = raio - 5;
        }