creo utilice lo aprendido en el codigo
<canvas width="600" height="400"></canvas>
<script>
var pantalla = document.querySelector('canvas');
var pincel = pantalla.getContext('2d');
pincel.fillStyle = 'grey';
pincel.fillRect(0, 0, 600, 400);
/*
pincel.fillStyle = "red"
pincel.fillRect(0,0,50,50);
pincel.fillStyle = "green"
pincel.fillRect(0,50,50,50);
pincel.fillStyle = "blue"
pincel.fillRect(0,100,50,50);
*/
var puedoDibujar = false;
var colores = ["red","green","blue"];
var colorActual = colores[2] ;
var xCuadrado = [0, 50 , 100 ];
var yCuadrado = 0;
var tamanhoCuadrados = 50 ;
function dibujarCirculo(x,y,colorActual ) {
if(puedoDibujar) {
pincel.fillStyle = colorActual;
pincel.beginPath();
pincel.arc(x, y, 5, 0, 2 * 3.14);
pincel.fill();
}
}
function dibujarLosCuadros(x, y, tamanho, color){
pincel.fillStyle = color;
pincel.fillRect(x,y, tamanho,tamanho);
pincel.fill();
}
function dibujarPaletaColores(n = 0 ){
for(n=0 ; n < xCuadrado.long ; n++){
dibujarLosCuadros(xCuadrado[n],yCuadrado,tamanhoCuadrados,colores[n]);
}
/*
dibujarLosCuadros(xCuadrado[n],yCuadrado,tamanhoCuadrados,colores[n]);
n++;
dibujarLosCuadros(xCuadrado[n],yCuadrado,tamanhoCuadrados,colores[n]);
*/
}
function habilitarDibujar() {
puedoDibujar = true;
}
function deshabilitarDibujar() {
puedoDibujar = false;
}
//Funcion para delimitar el área de dibujo
function puedoDisenarArea(xCoordenada,yCoordenada){
if((xCoordenada >=0 && xCoordenada < (3*tamanhoCuadrados)+5) &&
(yCoordenada >=0 && yCoordenada < tamanhoCuadrados+5)){
return false;
}else{
return true;
}
}
function capturarMovimientoDelMouse(evento){
var x = evento.pageX - pantalla.offsetLeft;
var y = evento.pageY - pantalla.offsetTop;
if(puedoDisenarArea(x,y)){
dibujarCirculo(x,y,colorActual)
}
}
//seleccionar el color de la paleta
/*
var colores = ["red","green","blue"];
var xCuadrado = [0, 50 , 100 ];
*/
function Seleccionarelcolor(evento){
var x = evento.pageX - pantalla.offsetLeft;
var y = evento.pageY - pantalla.offsetTop;
if( y > yCuadrado && y < (yCuadrado + tamanhoCuadrados)){
if( x > xCuadrado[0] && x < ( xCuadrado[0] + tamanhoCuadrados)){
colorActual = colores[0];//red
console.log(colorActual)
} else if (x > xCuadrado[1] && x < xCuadrado[1] + tamanhoCuadrados){
colorActual = colores[1];//green
} else if (x > xCuadrado[2] && x < xCuadrado[2] + tamanhoCuadrados){
colorActual = colores[2];//blue
}
}
}
pantalla.onmousemove = capturarMovimientoDelMouse;
//pantalla.onmousemove = dibujarCirculo;
pantalla.onmousedown = habilitarDibujar;
pantalla.onmouseup = deshabilitarDibujar;
dibujarPaletaColores();
pantalla.onclick = Seleccionarelcolor;
</script>
</script>
