<canvas width="600" height="400"></canvas>
<script>
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
pincel.fillStyle = 'grey';
pincel.fillRect(0, 0, 600, 400);
var cor = 'blue' || mudaCor()
function desenhaCirculo (evento){
var x = evento.pageX - tela.offsetLeft;
var y = evento.pageY - tela.offsetTop;
pincel.fillStyle = cor;
pincel.beginPath();
pincel.arc(x, y, 10, 0, 2 * 3.14);
pincel.fill();
console.log( x +','+y);
}
tela.onclick = desenhaCirculo;
var indice = 0 ;
function mudaCor() {
var cores =['red', 'green', 'blue']
if(indice == 1){
console.log(cor = cores[0]);
}
if(indice == 2){
console.log(cor = cores[1]);
}
if(indice == 3){
console.log(cor = cores[2]);
criaCounter(0);
}
}
function criaCounter(init) {
var count = init || 0;
return function() {
count++;
if (count > 3 ) {
count = 1;
}
indice = count;
mudaCor();
return false;
}
}
tela.oncontextmenu = criaCounter()
</script>