Solucionado (ver solución)
Solucionado
(ver solución)
3
respuestas

[Sugerencia] Diseñando con el mouse

Esta fue mi solución. Para mi fue más facil hacerlo de esta manera, es funcional y lo siento menos complicado que la opción del profesor:

<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 puedoDibujar = false;
  var colores = ["red", "green", "blue"];
  var color_selecionado = 2;
  var tamaño_cuadro = 50;

  function dibujarCirculo(evento) {
    if (puedoDibujar) {
      var x = evento.pageX - pantalla.offsetLeft;
      var y = evento.pageY - pantalla.offsetTop;
      var tamaño_cuadrox = 3 * tamaño_cuadro + 5;
      var tamaño_cuadroy = tamaño_cuadro + 5;
      if (tamaño_cuadrox >= x && tamaño_cuadroy >= y) {
        deshabilitarDibujar();
        habilitarDibujar();
      } else {
        pincel.fillStyle = colores[color_selecionado];
        pincel.beginPath();
        pincel.arc(x, y, 5, 0, 2 * 3.14);
        pincel.fill();
      }
    }
  }
  function paleta() {
    var posicion = 0;
    var x = 0;
    while (posicion < colores.length) {
      pincel.fillStyle = colores[posicion];
      pincel.fillRect(x, 0, tamaño_cuadro, tamaño_cuadro);
      x = x + tamaño_cuadro;
      posicion++;
    }
  }

  function habilitarDibujar() {
    puedoDibujar = true;
  }

  function deshabilitarDibujar() {
    puedoDibujar = false;
  }

  function cambiar_color(evento) {
    var x = evento.pageX - pantalla.offsetLeft;
    var y = evento.pageY - pantalla.offsetTop;

    if (x <= 50 && y <= 50) {
      color_selecionado = 0;
    } else {
      if (x >= 50 && x <= 100 && y <= 50) {
        color_selecionado = 1;
      } else {
        color_selecionado = 2;
      }
    }
  }
  paleta();
  pantalla.onmousemove = dibujarCirculo;
  pantalla.onmousedown = habilitarDibujar;
  pantalla.onmouseup = deshabilitarDibujar;
  pantalla.onclick = cambiar_color;
</script>

3 respuestas
solución!

Gracias, tu código me ayudo a entender por que el mio no funcionaba.

hola compañero , estuve ejecutando tu código, y solo ejecuta el color escogido en la primera pulsada del mouse, de ahi en adelante retorna al color azul

Bro ya vi cuál fue el error, copié el código que no había actualizado. Porque en efecto tenía ese error pero lo habia solucionado antes de subirlo Adjunto el código correcto:

<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 puedoDibujar = false;
  var colores = ["red", "green", "blue"];
  var color_selecionado = 2;
  var tamaño_cuadro = 50;

  function dibujarCirculo(evento) {
    if (puedoDibujar) {
      var x = evento.pageX - pantalla.offsetLeft;
      var y = evento.pageY - pantalla.offsetTop;
      var tamaño_cuadrox = 3 * tamaño_cuadro + 5;
      var tamaño_cuadroy = tamaño_cuadro + 5;
      if (tamaño_cuadrox >= x && tamaño_cuadroy >= y) {
        deshabilitarDibujar();
        habilitarDibujar();
      } else {
        pincel.fillStyle = colores[color_selecionado];
        pincel.beginPath();
        pincel.arc(x, y, 5, 0, 2 * 3.14);
        pincel.fill();
      }
    }
  }
  function paleta() {
    var posicion = 0;
    var x = 0;
    while (posicion < colores.length) {
      pincel.fillStyle = colores[posicion];
      pincel.fillRect(x, 0, tamaño_cuadro, tamaño_cuadro);
      x = x + tamaño_cuadro;
      posicion++;
    }
  }

  function habilitarDibujar() {
    puedoDibujar = true;
  }

  function deshabilitarDibujar() {
    puedoDibujar = false;
  }

  function cambiar_color(evento) {
    var x = evento.pageX - pantalla.offsetLeft;
    var y = evento.pageY - pantalla.offsetTop;

    if (x <= 50 && y <= 50) {
      color_selecionado = 0;
    } else {
      if (x >= 50 && x <= 100 && y <= 50) {
        color_selecionado = 1;
      } else {
        if (x >= 100 && x <= 150 && y <= 50) {
          color_selecionado = 2;
        }
      }
    }
  }
  paleta();
  pantalla.onmousemove = dibujarCirculo;
  pantalla.onmousedown = habilitarDibujar;
  pantalla.onmouseup = deshabilitarDibujar;
  pantalla.onclick = cambiar_color;
</script>