1
respuesta

No puedo evitar que me dibuje 1 punto en la paleta de colores

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>
1 respuesta

Hola Germán. Tal vez la solución sea que en la función dibujarCirculo en los parámetros dentro del if, en vez de colocar x < 150, le coloques 155 por ejemplo. y al y < 50, que sea y < 55;

Si alguien sabe de otra solución que avise porque me pasa lo mismo