Hice una solución alterna al cambio de color en el cual pinte unos cuadros pequenos de 50x50 y al hacer click sobre ellos se selecciona el color el cual se quiere usar, asi mismo el color blanco vuelve a pintar de gris todo el canvas como limpiandolo, imagen de resultado al final.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<canvas width="600" height="400">
</canvas>
<script>
var pantalla = document.querySelector("canvas");
var pincel = pantalla.getContext("2d");
var color = "white"
pincel.fillStyle = "gray"; // colorear el fondo del canvas de gris
pincel.fillRect(0,0,600,400); // area del canvas a colorear
function colorFondo(){ // funcion que colorea los cuadros de seleccion
pincel.fillStyle = "red";
pincel.fillRect(0,0,50,50);
pincel.fillStyle = "blue";
pincel.fillRect(50,0,50,50);
pincel.fillStyle = "green";
pincel.fillRect(100,0,50,50);
pincel.fillStyle = "white";
pincel.fillRect(150,0,50,50);
pincel.fillStyle = "black"
pincel.font = "15px arial";
pincel.fillText("reload",155,30);
}
colorFondo(); //se manda a llamar a la funcion para que coloree los cuadros de seleccion
function alertando(evento){
var x = evento.pageX - pantalla.offsetLeft;
var y = evento.pageY - pantalla.offsetTop;
alert(x+","+y);
console.log(evento);
}
function dibujarCirculo(evento){
var x = evento.pageX - pantalla.offsetLeft; // seleccion de posicion del cursor en x
var y = evento.pageY - pantalla.offsetTop; // seleccion de posicion del cursor en y
if (x <= 50 && y <=50 ) { //si el x esta entre 0 y 50 elige color rojo
color = "red";
}
if (x >= 51 && x <=99 && y <= 50) {//si el x esta entre 51 y 99 elige color azul
color = "blue";
}
if (x >= 100 && x <=150 && y <= 50) {//si el x esta entre 0 y 50 elige color verde
color = "green";
}
if (x >= 151 && x <=200 && y <= 50) {//si el x esta entre 0 y 50, y entre 0 y 50 resetea la pagina
pincel.fillStyle = "gray"; // colorear el fondo del canvas de gris
pincel.fillRect(0,0,600,400); // area del canvas a colorear
colorFondo(); // llama la funcion y colorea los cuadros de seleccion
color = "white"; // la variable color regresa a blanco
}
pincel.fillStyle = color; // color del circulo de acuerdo a la variable
pincel.beginPath(); // inicia dibujo
pincel.arc(x,y,10, 0,2*3.1416); // define posicion, tamano del circulo
pincel.fill(); // dibuja el circulo
console.log(x+","+y); // escribe en consola el valor de x, y
colorFondo(); // vuelve a colorear los cuadritos para que no se dibujen circulos de color al hacer seleccion
}
pantalla.onclick = dibujarCirculo; // llama la funcion de dibujar circulos al hacer click dentro del canvas
</script>
<body>
</body>
</html>
