¡Hola Francisco!
En el código que compartiste estás dibujando un triángulo y un rectángulo en un canvas. Si lo que quieres es dibujar una escuadra, debes modificar las coordenadas de los puntos que estás dibujando.
Aquí te dejo un ejemplo de cómo podrías hacerlo:
<!DOCTYPE html>
<html lang="en">
<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>ESCUADRA</title>
</head>
<body>
<canvas width="650" height="550"></canvas>
<script>
var pantalla = document.querySelector("canvas");
var pincel = pantalla.getContext("2d");
pincel.fillStyle = "blue"
pincel.fillRect(0,0,500,450)
pincel.fillStyle = "black"
pincel.beginPath();
pincel.moveTo(50,50);
pincel.lineTo(50,400);
pincel.lineTo(400,400)
pincel.lineTo(400,350)
pincel.lineTo(100,350)
pincel.lineTo(100,50)
pincel.fill();
pincel.fillStyle = "red"
pincel.beginPath();
pincel.moveTo(100,175);
pincel.lineTo(100,350);
pincel.lineTo(275,350)
pincel.fill();
</script>
</body>
</html>
En este código se agregaron cuatro líneas para dibujar la línea diagonal de la escuadra. Espero que te sea de ayuda. ¡Buenos estudios!
Un saludo.
Si este post te ayudó, por favor,
marca como solucionado ✓. Continúa con tus estudios
