Solução do exercício | JavaScript e HTML: pratique lógica com desenhos, animações e um jogo

<html>

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

<script>

var tela = document.querySelector("canvas");
var pincel = tela.getContext("2d");

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

var cores = ['blue', 'red', 'green'];
var indiceCorAtual = 0;

function desenhaCirculo (evento) {

    var x = evento.pageX - tela.offsetLeft;
    var y = evento.pageY - tela.offsetTop;
    var shift = evento.shiftKey;

    if (shift) {
        pincel.fillStyle = cores[indiceCorAtual];
        pincel.beginPath();
        pincel.arc(x, y, 30, 0, Math.PI*2);
        pincel.fill();
    } else {
        pincel.fillStyle = cores[indiceCorAtual];
        pincel.beginPath();
        pincel.arc(x, y, 10, 0, Math.PI*2);
        pincel.fill();
    }

    console.log(x + ", " + y);
}

function mudaCor() {
    indiceCorAtual++;
    if (indiceCorAtual >= cores.length) {
        indiceCorAtual = 0;
    }
    console.log("trocou a cor");
    return false;
}

tela.oncontextmenu = mudaCor;
tela.onclick = desenhaCirculo;

</script>

</html>