Segue a resolução do exercício, porem com algumas modificações que vi no forum e acabei montando desta forma!
- Randomização das cores
- O Aumento do circulo eu tive uma resolução diferente e que está funcional, caso tenham mais ideias é sempre bem vinda!
- Bordas pretas e finas para dar profundidade a cada aumento do circulo.
- Caso tenham mais alguma ideia é só mandar, quanto mais implementação melhor, estou aberto a sugestões para que o exercicio fique a cada modificação fique mais divertido!
<canvas width="600" height="400"></canvas>
<script>
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
var cores = ['blue', 'red', 'green', 'purple', 'white', 'yellow']; //PALETA DE CORES PARA ALTERAÇÃO DAS BOLINHAS
var indiceCorAtual = 0;
var raio = 10;
pincel.fillStyle = 'grey';
pincel.fillRect(0,0,600,400);
function desenhaCirculo(evento){
var x = event.pageX - tela.offsetLeft;
var y = event.pageY - tela.offsetTop;
pincel.fillStyle = cores[indiceCorAtual];
pincel.beginPath();
if (evento.shiftKey){
pincel.arc(x , y , raio++ , 0 , 2 * 3.14); // SE PRESSIONADO A BOLINHA AUMENTA GRADATIVAMENTE!
pincel.fill();
}else{
pincel.arc(x , y , raio , 0 , 2 * 3.14); //SE NÃO PRESSIONADO O TAMANHO DA BOLINHA É DE 10!
pincel.fill();
console.log(x +',' + y);
}
pincel.lineWidth = 2; //ESPESSURA DA BORDA
pincel.strokeStyle = "black"; //COR DA BORDA
pincel.stroke();
}
function mudaCor(){ //DEIXA AS CORES EM ORDEM ALEATORIA
indiceCorAtual = Math.round(Math.random() * 6);
if(indiceCorAtual >= cores.length){
indiceCorAtual = 0;
}
return false;
}
tela.onclick = desenhaCirculo;
tela.oncontextmenu = mudaCor;