<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Escuadra</title>
</head>
<body>
<canvas class = "lienzo" width="600" height="400"></canvas>
<script>
const canvas = document.querySelector(".lienzo");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "gray";
ctx.fillRect(0,0,600,400);
ctx.fillStyle = "black";
ctx.beginPath();
ctx.moveTo(50,50);
ctx.lineTo(50,350);
ctx.lineTo(350,350);
ctx.fill();
ctx.fillStyle = "gray";
ctx.beginPath();
ctx.moveTo(100,175);
ctx.lineTo(100,300);
ctx.lineTo(225,300);
ctx.fill();
</script>
</body>
</html>
