[Proyecto] canvas: crear cuadro de colores aleatorios | Alura Latam

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Graficas interaccion</title>
</head>
<body>

  <h2>Graficas interaccion</h2>

  <form>
    <label for="filas">cantidad de filas:   </label>
    <input type="number" id="filas" name="filas"><br><br>
    <label for="columnas">cantidad de columnas:</label>
    <input type="number" id="columnas" name="columnas"><br><br>
    <button type="button" onclick="dibujarcuadrado()">dibujar</button>
    <button type="button" onclick="limpiarcuadrado()">limpiar</button>
  </form>

  <canvas id="canvas1" width="600" height="400"></canvas>

  <script>
    function color() {
      var colores = ['Aquamarine', 'Crimson', 'DarkOrange', 'ForestGreen', 
                     'Gold', 'Indigo', 'LimeGreen', 'MediumBlue', 'SaddleBrown', 'Tomato'];
      var aleatorio = Math.floor(Math.random() * colores.length);
      return colores[aleatorio];
    }

    function dibujarcuadrado() {
      var filas = parseInt(document.getElementById("filas").value);
      var columnas = parseInt(document.getElementById("columnas").value);
      var pantalla = document.getElementById("canvas1");
      var pincel = pantalla.getContext("2d");

      pincel.strokeStyle = "black";

      for(var i = 0; i < columnas; i++) {
        for(var j = 0; j < filas; j++) {
          pincel.fillStyle = color();
          pincel.fillRect(50 * i, 50 * j, 50, 50);
          pincel.strokeRect(50 * i, 50 * j, 50, 50);
        }
      }
    }

    function limpiarcuadrado() {
      var pantalla = document.getElementById("canvas1");
      var pincel = pantalla.getContext("2d");
      pincel.clearRect(0, 0, pantalla.width, pantalla.height);
    }
  </script>
</body>
</html>
Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad