En el ejercicio anterior, hice un dibujo cuadro por cuadro. Pensé que sería bueno hacer una función que automatice la creación, señalando solamente el tamaño que se quiere de canvas, el tamaño de la forma que se quiere y quizá agregar un array con colores para que se seleccione alguno o algunos de manera random. Veo para allá se dirige esto más o menos.
Otra cosa que noté es que si hago más grueso el borde, al estar en el total inicio de la página, el borde se corta, entonces tomar en cuenta esto y programarlo de tal manera que esto no suceda.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Canvas JS</title>
</head>
<body>
<canvas width="600" height="400"> </canvas>
<script>
function drawSquare() {
var screen = document.querySelector("canvas");
var brush = screen.getContext("2d");
brush.fillStyle = "aqua";
brush.fillRect(20, 20, 50, 50);
brush.strokeStyle = "purple";
brush.strokeRect(20, 20, 50, 50);
brush.lineWidth = 3;
}
drawSquare();
drawSquare();
drawSquare();
drawSquare();
</script>
</body>
</html>
