1
resposta

Meu código!!!

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

<script>

    var screen = document.querySelector('canvas');
    var brush = screen.getContext('2d');

    brush.fillStyle = 'lightgrey';
    brush.fillRect(0, 0, 600, 400);

    var colors = ['blue', 'green', 'purple', 'orange'];
    var colorIndex = 0;

    function drawSquare(event, raio){

        var x = event.pageX - screen.offsetLeft;
        var y = event.pageY - screen.offsetTop;
        event.shiftKey = true;

        if(event.shiftKey){

            raio = 30;

        }else{

            raio = 10;
        }

        brush.fillStyle = colors[colorIndex];
        brush.beginPath();
        brush.arc(x, y, raio, 0, 2 * 3.14);
        brush.fill();

    }


    screen.onclick = drawSquare;


    function swithColor(){
        colorIndex++

        if(colorIndex >= colors.length){

            colorIndex = 0;
        }


        return false

    }

    screen.oncontextmenu = swithColor;

</script>
1 resposta

Olá Edson tudo bem com você??

Ficou muito massa! Gostei das mudanças de cores.

Ansioso para ver seus próximos projetos! Bons estudos!