Intente realizar como me salio el desafió final de la paleta de colores que cambia según el color que se seleccione. El único inconveniente que tuve fue el de realizar el bloqueo del área de la paleta de colores.
<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);
var colorPaleta;
//dibujo paleta
function dibujarRectangulo(x,y,color) {
pincel.fillStyle = color;
pincel.fillRect(x,y,50,50);
pincel.fillStyle = color;
pincel.fillRect(x,y,50,50);
pincel.fillStyle = color;
pincel.fillRect(x,y,50,50);
}
dibujarRectangulo(0,0,"red");
dibujarRectangulo(50,0,"green");
dibujarRectangulo(100,0,"blue");
var puedoDibujar = false;
//cambio colores
function cambiarColor(evento){
var x = evento.pageX - pantalla.offsetLeft;
var y = evento.pageY - pantalla.offsetTop;
if ((x > 0 && x < 50) && (y < 50 && y > 0)) {
colorPaleta = "red";
}
else if ((x > 50 && x < 100) && (y < 50 && y > 0)) {
colorPaleta = "green";
}
else if ((x > 100 && x < 150) && (y < 50 && y > 0)) {
colorPaleta = "blue";
}
}
/*function bloquearArea(posicionX,posicionY){
if ((posicionX >= 0 && posicionX > 155) && (posicionY >= 0 && posicionY < 55)) {
return false;
}
else{
return true;
}
}
*/
pantalla.onclick = cambiarColor;
function dibujarCirculo(evento) {
if(puedoDibujar) {
var x = evento.pageX - pantalla.offsetLeft;
var y = evento.pageY - pantalla.offsetTop;
pincel.fillStyle = colorPaleta;
pincel.beginPath();
pincel.arc(x, y, 5, 0, 2 * 3.14);
pincel.fill();
}
}
pantalla.onmousemove = dibujarCirculo;
function habilitarDibujar() {
puedoDibujar = true;
}
function deshabilitarDibujar() {
puedoDibujar = false;
}
pantalla.onmousedown = habilitarDibujar;
pantalla.onmouseup = deshabilitarDibujar;
</script>
