Hola alguien me ayuda con mi código del programa para dibujar con la paleta de colores, lo único que me falta es bloquear la zona de la paleta para que no se pueda dibujar sobre ella, lo he conseguido a medias, lo único que se me ocurrió fue usar un if (y>58) para que solo se pueda dibujar desde la coordenada y=58 en adelante, lo cual no es ideal, porque entiendo que quieren que también se pueda dibujar en el espacio al lado de la paleta de colores, si alguien me ayuda, se lo agradecería, la verdad es el que el código del profe no lo entiendo mucho, sobre todo la parte de delimitar el área.
<canvas width="600" height="400"></canvas>
<script>
var pantalla = document.querySelector('canvas');
var pincel = pantalla.getContext('2d');
pincel.fillStyle = 'lightgrey';
pincel.fillRect(0, 0, 600, 400);
pincel.fillStyle = 'red';
pincel.fillRect(0, 0, 50, 50);
pincel.strokeStyle = "black";// es el color del borde, una propiedad
pincel.strokeRect(0, 0,50,50); //las 2 primeras coordenadas son la posición inicial y las ultimas 2 son el tamaño de la figura
pincel.fillStyle = 'green';
pincel.fillRect(50, 0, 50, 50);
pincel.strokeStyle = "black";// es el color del borde, una propiedad
pincel.strokeRect(50, 0,50,50); //las 2 primeras coordenadas son la posición inicial y las ultimas 2 son el tamaño de la figura
pincel.fillStyle = 'blue';
pincel.fillRect(100, 0, 50, 50);
pincel.strokeStyle = "black";// es el color del borde, una propiedad
pincel.strokeRect(100, 0,50,50); //las 2 primeras coordenadas son la posición inicial y las ultimas 2 son el tamaño de la figura
var puedoDibujar = false;
var color = "blue"
function cambiarColor(evento){
var x = evento.pageX - pantalla.offsetLeft;
var y = evento.pageY - pantalla.offsetTop;
if((x < 50) &&
(x > 0) &&
(y < 50) &&
(y > 0)) {
color = "red";
}
if((x < 100) &&
(x > 50) &&
(y < 50) &&
(y > 0)) {
color = "green";
}
if((x < 150) &&
(x > 100) &&
(y < 50) &&
(y > 0)) {
color = "blue";
}
}
pantalla.onclick = cambiarColor
function dibujarCirculo(evento) {
if(puedoDibujar) {
var x = evento.pageX - pantalla.offsetLeft;
var y = evento.pageY - pantalla.offsetTop;
if((y>58)){
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>
