2
respostas

Com Shift aumenta, sem Shift o tamanho é normal

Coloquei um else na condição e a bolinha volta ao tamanho normal sem clicar no Shift!

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

<script>
    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');

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

    var colors = ['blue', 'red', 'green'];
    var indiceCor = 0;


    function desenhaCirculo(event){

      //para saber as coordenadas do click, dentro da tela cinza.
      var x = event.pageX - tela.offsetLeft;
      var y = event.pageY - tela.offsetTop;

      //para mudar o tamanho do raio da bolinha com a tecla shift
      var raio = 10;

      if(event.shiftKey){
        raio = raio + 20;
      } else {
        raio = 10;
      }

      //para fazer uma bolinha vermelha onde for clicado dentro da tela cinza.
      pincel.fillStyle = colors[indiceCor]
      pincel.beginPath();
      pincel.arc(x,y,raio,0,2*3.14);
      pincel.fill()
    }

  tela.onclick = desenhaCirculo

    function mudaCor(){
      indiceCor++

      if(indiceCor >= colors.length){
        indiceCor = 0
      } 
      return false;
    }

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

Na verdade, para isso acontecer a var raio deve estar fora da função. Então o if com else tem efeito, senão é indiferente. Erro meu!

Bacana, Jady!

Perfeito!

Ficou muito bom!

Até coloquei mais cores dentro do array para colorir ainda mais =D

Pratique sempre

Qualquer dúvida nos procure

Um abraço e bons estudos