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

Implementação de Tamanho e umas coisas a mais

Na realidade não é bem uma dúvida, e sim uma implementação que eu acabei fazendo.

Implementei uma alteração de tamanho atrabés do scroll do mouse e a simulação de ir desenhando com o clique pressionado.

<canvas width="600" height="400"></canvas>

<script>
    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
    pincel.fillStyle = 'grey';
    pincel.fillRect(0, 0, 600, 400);

    var cores = ["blue","red","green","black","white","grey"];
    var indiceCorAtual  = 0;

    var tamanhos = [2,4,6,8,10,16,24,30]
    var indiceTamAtual  = 4;

    var isDown = false;

    function desenhaCirculo(evento, cor) {
        if (!isDown) {
            return;
        }

        var x = evento.pageX - tela.offsetLeft;
        var y = evento.pageY - tela.offsetTop;
        pincel.fillStyle = cores[indiceCorAtual];
        pincel.beginPath();
        pincel.arc(x, y, tamanhos[indiceTamAtual], 0, 2 * 3.14);
        pincel.fill();
        console.log(tamanhos[indiceTamAtual]);
    }

    tela.onmousemove = desenhaCirculo;
    tela.onmousedown = function (e)  {
        e.preventDefault();
        e.stopPropagation();
        isDown = true;
    }

    tela.onmouseup =function(e){
        if (!isDown) {
            return;
        }
        e.preventDefault();
        e.stopPropagation();
        isDown = false;
    }

    function mudaCor() {        

        indiceCorAtual++
        if(indiceCorAtual >= cores.length) {
            indiceCorAtual = 0; // volta para a primeira cor, azul
        }

        return false;
    }

    // Retorna o clique do botão esquerdo do mouse
    tela.oncontextmenu = mudaCor;

    function mudaTamanho(event){

        if(event.wheelDeltaY >= 0){            
            indiceTamAtual++;
        }else{
            indiceTamAtual--;
        }

        if(indiceTamAtual >= tamanhos.length){
            indiceTamAtual = tamanhos.length-1;
        }else if(indiceTamAtual <= 0){
            indiceTamAtual = 0;
        }
        return false;
    }

    tela.onmousewheel = mudaTamanho;

</script>
1 resposta
solução!

Oi Thiago, tudo bem? Testei seu código aqui e funcionou perfeitamente. Sensacional isso que fez, parabéns!