Escuadra graduada | Lógica de programación: Practicando con juegos y animaciones | Alura Latam

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Escuadra graduada</title>
</head>

<body>

    <canvas width="500" height="500"></canvas>

</body>

</html>

<script>

var pantalla = document.querySelector("canvas");
var pincel = pantalla.getContext("2d");

pincel.fillStyle = "cadetblue";
pincel.beginPath();
pincel.moveTo(50,50);
pincel.lineTo(50,400);
pincel.lineTo(400,400)
pincel.fill();

pincel.fillStyle = "white";
pincel.beginPath();
pincel.moveTo(100,175);
pincel.lineTo(100,350);
pincel.lineTo(275,350)
pincel.fill();

pincel.fillStyle = "lightblue";
pincel.fillRect (50,100,30,5);

pincel.fillStyle = "lightblue";
pincel.fillRect (50,110,20,3);

pincel.fillStyle = "lightblue";
pincel.fillRect (50,120,20,3);

pincel.fillStyle = "lightblue";
pincel.fillRect (50,130,20,3);

pincel.fillStyle = "lightblue";
pincel.fillRect (50,140,20,3);

pincel.fillStyle = "lightblue";
pincel.fillRect (50,150,30,5);

pincel.fillStyle = "lightblue";
pincel.fillRect (50,160,20,3);

pincel.fillStyle = "lightblue";
pincel.fillRect (50,170,20,3);

pincel.fillStyle = "lightblue";
pincel.fillRect (50,180,20,3);

pincel.fillStyle = "lightblue";
pincel.fillRect (50,190,20,3);

pincel.fillStyle = "lightblue";
pincel.fillRect (50,200,30,5);

pincel.fillStyle = "lightblue";
pincel.fillRect (50,210,20,3);

pincel.fillStyle = "lightblue";
pincel.fillRect (50,220,20,3);

pincel.fillStyle = "lightblue";
pincel.fillRect (50,230,20,3);

pincel.fillStyle = "lightblue";
pincel.fillRect (50,240,20,3);

pincel.fillStyle = "lightblue";
pincel.fillRect (50,250,30,5);

pincel.fillStyle = "lightblue";
pincel.fillRect (50,260,20,3);

pincel.fillStyle = "lightblue";
pincel.fillRect (50,270,20,3);

pincel.fillStyle = "lightblue";
pincel.fillRect (50,280,20,3);

pincel.fillStyle = "lightblue";
pincel.fillRect (50,290,20,3);

pincel.fillStyle = "lightblue";
pincel.fillRect (50,300,30,5);

pincel.fillStyle = "lightblue";
pincel.fillRect (50,310,20,3);

pincel.fillStyle = "lightblue";
pincel.fillRect (50,320,20,3);

pincel.fillStyle = "lightblue";
pincel.fillRect (50,330,20,3);

pincel.fillStyle = "lightblue";
pincel.fillRect (50,340,20,3);

pincel.fillStyle = "lightblue";
pincel.fillRect (50,350,30,5);

</script>

Hola Elisabet, solo tengo una sugerencia en esta parte de codigo:

pincel.fillStyle = "lightblue";
pincel.fillRect (50,100,30,5);

Veo que repites mucho pincel.fillStyle = "lightblue"; puedes omitir todos solo dejando una vez y al principio, aqui esta el ejemplo:

pincel.fillStyle = "lightblue";   // Solo lo declare una vez, como los fillRect son del mismo color solo escribo las coordenadas
pincel.fillRect (50,110,20,3);
pincel.fillRect (50,120,20,3);
pincel.fillRect (50,130,20,3);
pincel.fillRect (50,140,20,3);
pincel.fillRect (50,150,30,5);
pincel.fillRect (50,160,20,3);
pincel.fillRect (50,170,20,3);
...
// mas codigo
...
pincel.fillRect (50,180,20,3);
pincel.fillRect (50,190,20,3);
pincel.fillRect (50,200,30,5);