Esta es mi solución, agregue mas colores para ver una diferencia como solución mas optimizada. Espero se de gran aporte para el foro y lo puedan analizar para ver distintas maneras de llegar al resultado. Tal vez se puede mejorar mas pero quiza sea mas adelante.
<meta charset="UTF-8">
<canvas width="600" height="400"></canvas>
<br>
<button>Limpiar</button>
<script>
var pantalla = document.querySelector("canvas");
var pincel = pantalla.getContext("2d");
var button = document.querySelector("button");
pincel.fillStyle = "lightgrey";
pincel.fillRect(0, 0, 600, 400);
var colores = ["blue", "green", "red", "yellow", "white", "black", "brown", "grey"];
var x = 0;
var y = 0;
var colorSeleccionado = 0;//Determina el indice del color a dibujar
var seleccionPaleta = false;//Determina si el cursos esta en la paleta de colores
var puedoDibujar = false;//Accion para dibujar
function Limpiar() {
pincel.clearRect(0, 0, 600, 400);
pincel.fillStyle = "lightgrey";
pincel.fillRect(0, 0, 600, 400);
colorSeleccionado=0;
DibujarCuadrado();
}
function DibujarCuadrado() {
contador = 0;
//Recorro el for al reves para que se muestre como en el ejemplo
//Igual dejando el azul en primer posicion que es [0] en el array de colores que por default
for (var i = colores.length - 1; i >= 0; i--) {
pincel.fillStyle = colores[i];
pincel.fillRect(contador, 0, 50, 50);//Pinta cada cuadro con sus respectivo color
contador = contador + 50;
}
}
function DibujarCirculo(x, y, color) {
pincel.fillStyle = color;
pincel.beginPath();
pincel.arc(x, y, 5, 0, 2 * Math.PI);
pincel.fill();
}
//Funcion Paleta() determino el maximo de area que tendran los colores, para poder delimitar
//Se retorna un true si el cursor esta en la paleta de lo contrario false;
function Paleta(coordenadaX, coordenadaY) {
var maximoPaleta = 50 * colores.length;
return (coordenadaX >= 0 && coordenadaX <= maximoPaleta) && (coordenadaY >= 0 && coordenadaY <= 54);
}
//Funcion elegirColor() y este Determina el area de cada cuadrado de color asi se podra elegir el color cuando haga click con el mouse
function elegirColor(evento) {
coorx = evento.pageX - pantalla.offsetLeft;
coory = evento.pageY - pantalla.offsetTop;
var maximoPaleta = 50 * colores.length;
if (Paleta(coorx, coory)) {
var cuadrado = 50;
//Si las coordenadas coinciden con el click del cursos, se elige el color
//Cada iteracion es un cuadro del color
for (var i = colores.length - 1; i >= 0; i--) {
if (coorx >= cuadrado - 50 && coorx <= cuadrado) {
colorSeleccionado = i;
}
cuadrado = cuadrado + 50;
}
}
}
//Aqui se obtiene en que coordenadas donde esta el cursor
function Pincel(evento) {
x = evento.pageX - pantalla.offsetLeft;
y = evento.pageY - pantalla.offsetTop;
seleccionPaleta = Paleta(x, y);
//console.log("(" + x + "," + y + ") Color: " + colores[colorSeleccionado] + " Seleccion Paleta: " + seleccionPaleta);
//Si se [puedoDibujar==true] y la paleta no esta seleccionda [seleccionPaleta=false] ( !false=true) se podra dibujar
if (puedoDibujar && !seleccionPaleta) {
DibujarCirculo(x, y, colores[colorSeleccionado]);
}
}
function habilitarDibujar() {
puedoDibujar = true;
}
function deshabilitarDibujar() {
puedoDibujar = false;
}
DibujarCuadrado();
button.onclick=Limpiar;
pantalla.onclick = elegirColor;
pantalla.onmousemove = Pincel;
pantalla.onmousedown = habilitarDibujar;
pantalla.onmouseup = deshabilitarDibujar;
</script>
