2
respostas

ShiftKey

Minha solução:

<canvas width="600" height="400"></canvas>
<p style="font-weight: bold"></p>

<script>
  let p = document.querySelector("p");

  let tela = document.querySelector("canvas");
  let pincel = tela.getContext("2d");
  pincel.fillStyle = "grey";
  pincel.fillRect(0, 0, 600, 400);

  let cor = ["blue", "red", "green"];
  let aux = 0;

  desenhaCirculo = (evento) => {
    let x = evento.pageX - tela.offsetLeft;
    let y = evento.pageY - tela.offsetTop;
    let raio;

    // altera o tamanho do círculo
    evento.shiftKey ? (raio = 30) : (raio = 10);

    pincel.fillStyle = cor[aux];
    pincel.beginPath();
    pincel.arc(x, y, raio, 0, 2 * Math.PI);
    pincel.fill();

    p.style.color = cor[aux];
    p.innerHTML = cor[aux];

    return evento;
  };

  tela.addEventListener("click", desenhaCirculo);

  mudaCor = () => {
    aux++;

    // Reseta a cor
    if (aux == 3) {
      aux = 0;
    }

    return false;
  };
  tela.oncontextmenu = mudaCor;
</script>
2 respostas

Show de bola, só código bom hein!

Obrigado, Flávio André! Alguns ficam mais "clean" e outros nem tanto haha, o negócio é praticar mesmo.