Con unos ligeros cambios :D
<canvas width="600" height="400"></canvas>
<script>
var triangulo = document.querySelector("canvas");
var regla = triangulo.getContext("2d");
regla.fillStyle = "lightblue";
regla.fillRect(0, 0, 600, 400);
// Triangulo Grande
regla.fillStyle = "black";
regla.beginPath();
regla.moveTo(50, 50);
regla.lineTo(50, 350);
regla.lineTo(350, 350);
regla.fill();
// Triangulo Pequeño
regla.fillStyle = "lightblue";
regla.beginPath();
regla.moveTo(100, 175);
regla.lineTo(100, 300);
regla.lineTo(225, 300);
regla.fill();
</script>
