al momento de realizar tuve un pequeño problema, pero ya lo solucione, como ven mi codigo?
<!doctype html>
<meta charset="UTF-8">
<canvas width="600" height="400"></canvas>
<script>
var pantalla = document.querySelector("canvas");
var pincel = pantalla.getContext("2d");
var colores = ["Blue","red","Green"];
var actual = 0;
pincel.fillStyle = "Grey";
pincel.fillRect(0,0,600,400);
function exibirAlerta(evento){
var x = evento.pageX - pantalla.offsetLeft;
var y = evento.pageY - pantalla.offsetTop;
console.log(evento)
alert("usted hizo un click, en la posicion: " + x + ","+y);
}
function dibujar_un_circulo(evento){
var x = evento.pageX - pantalla.offsetLeft;
var y = evento.pageY - pantalla.offsetTop;
pincel.fillStyle = colores[actual];
pincel.beginPath();
pincel.arc(x,y,10,0,2*3.14159)
pincel.fill();
console.log(x + ","+y)
if (actual >= 2){
actual = 0;
} else
actual++;
alert("Funciono, estamos en el color"+ actual)
return false;
}
function alterar_color(){
if (actual >= 2){
actual = 0;
} else
actual++;
alert("Funciono, estamos en el color"+ actual)
return false;
}
//pantalla.onclick = exibirAlerta;
pantalla.onclick = dibujar_un_circulo;
pantalla.oncontextmenu = alterar_color;
</script>
