const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const colores = ['blue', 'red', 'green'];
let iterador = 0;
ctx.fillStyle = 'gray';
ctx.fillRect(0,0,600,400);
const dibujarCirculo = evento => {
let x = evento.pageX - canvas.offsetLeft;
let y = evento.pageY - canvas.offsetTop;
ctx.fillStyle = colores[iterador];
ctx.beginPath();
ctx.arc(x,y,10,0,2*Math.PI);
ctx.fill();
}
const alterarColor = () => {
(iterador===colores.length-1) ? iterador=0 : iterador++;
return false;
}
canvas.oncontextmenu = alterarColor;
canvas.onclick = dibujarCirculo;