Hola Gente, les cuento que con el ejercicio final he logrado casi todos los puntos, solo me falta resolver 1 detalle que paso a comentar..la paleta de colores esta ok, cuando se selecciona 1 color se puede pintar sobre el canvas correctamente pero siempre se puede hacer un punto de otro color en la paleta, no se puede seguir pintando la zona pero ese punto no debería poder hacerse...mi conclusión es que no esta bien colocada la porcion de codigo que evita esto pero no encuentro el lugar correcto...escribo mi código y si alguien se da cuenta espero sus comentarios, desde ya muy agradecido con las ayudas que vienen dandome..
<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(50, 0, 50, 50);
pincel.fillStyle = "blue";
pincel.fillRect(100, 0, 50, 50);
var puedoDibujar = false;
var color = "blue";
function elegirColor(evento) {
var x = evento.pageX - pantalla.offsetLeft;
var y = evento.pageY - pantalla.offsetTop;
if (x >= 0 && x < 50 && y >= 0 && y <= 50) {
color = "red";
} else if (x >= 50 && x < 100 && y >= 0 && y <= 50) {
color = "green";
} else if (x >= 100 && x <= 150 && y >= 0 && y <= 50) {
color = "blue";
}
}
pantalla.onclick = elegirColor;
function dibujarCirculo(evento) {
if (puedoDibujar) {
var x = evento.pageX - pantalla.offsetLeft;
var y = evento.pageY - pantalla.offsetTop;
if ((x >= 0 && x <= 150) && (y >= 0 && y <= 50)) {
puedoDibujar = false;
}
pincel.fillStyle = color;
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>