Olá. Indo um pouco além, criei uma function com um swith para identificar a cor selecionada. Também coloquei um retângulo no angulo superior direito para exibir qual a cor selecionada no momento. Criei uma função que executa ao clicarmos com o botão direito e altera a cor deste retângulo. Porém ao usa-la, a cor do último círculo já desenhado, é alterado também. Criei até uma variável PINCEL2 para tentar limitar os atributos, mas não identifiquei de forma alguma o problema. Eu quero que só o retângulo e os círculos que serão desenhados tenham a cor impactada, não as círculos que já desenhei...
<canvas width="800" height="600"></canvas>
<meta charset="UTF-8">
<script>
var tela = document.querySelector("canvas");
var pincel = tela.getContext ('2d');
var pincel2 = tela.getContext ('2d');
var numeroCor = 1;
pincel.fillStyle = 'grey';
pincel.fillRect (0,0,800,600);
pincel.font = "20px Georgia";
pincel.fillStyle = 'black';
pincel.fillText("Cor Selecionada:", 590,32);
pincel2.fillStyle = identificaCor(numeroCor);
pincel2.fillRect(740,10,50,30);
pincel2.fill();
pincel2.fillStroke = "black";
pincel2.strokeRect = (740,10,50,30);
function identificaCor (numeroCor){
switch (numeroCor) {
case 0:
cor = 'yellow';
break;
case 1:
cor = 'lightblue';
break;
case 2:
cor = 'red';
break;
case 3:
cor = 'green';
break;
case 4:
cor = 'yellow';
break;
case 5:
cor = 'blue';
break;
case 6:
cor = 'lightred';
break;
case 7:
cor = 'green';
break;
case 8:
cor = 'lightyelow';
break;
case 9:
cor = 'blue';
break;
case 10:
cor = 'lightgreen';
break;
}
return cor;
}
function desenhaCirculo (evento){
var x = evento.pageX - tela.offsetLeft;
var y = evento.pageY - tela.offsetTop;
pincel.fillStyle = identificaCor(numeroCor);
pincel.beginPath();
pincel.arc (x,y,10, 0, 2 * 3.14);
pincel.fill();
}
function exibeCor() {
pincel2.fillStyle = identificaCor(numeroCor);
pincel2.fillRect(740,10,50,30);
pincel2.fill();
pincel2.fillStroke = "black";
pincel2.strokeRect = (740,10,50,30);
}
function mudaCor () {
if (numeroCor == 10){
numeroCor = 1;
}
else {
numeroCor++;
}
exibeCor();
}
tela.onclick = desenhaCirculo;
tela.oncontextmenu = mudaCor;
</script>