Quiero dibujar algunos triángulos en un lienzo de manera procesal (eventualmente agregando algo de animación y otros efectos). Me las arreglé para obtener algunas formas simples en el lienzo, pero por alguna razón no puedo dibujar triángulos por alguna razón. He estado usando un código de esta pregunta pero hasta ahora no funciona.

HTML

Hay más, pero por simplicidad he omitido las partes que no se usan en absoluto. Estoy usando Bootstrap. Esa ruta de script también es una ruta válida.

 function triangles() { let left = document.getElementById("left") let ctx = left.getContext("2d"); ctx.fillStyle = "#ff0000"; ctx.beginPath(); ctx.moveTo(0, 0); ctx.moveTo(100, 0); ctx.moveTo(0, 100); ctx.moveTo(0, 0); ctx.closePath(); ctx.fill(); ctx.strokeStyle = "blue"; ctx.lineWidth = 4; ctx.stroke(); } triangles()

 canvas { width: 400px; height: 400px; border: 2px solid #A2A2A2; }

 <div class="min-vh-100"> <div class="row align-items-start"> <div class="col-2"> <canvas id="left"></canvas> </div> <div class="col-8"> </div> <div class="col-2"> <canvas id="right"></canvas> </div> </div> </div>

Usar esto me da un lienzo completamente en blanco. Como dije anteriormente, he jugado con otras formas de dibujar en el lienzo, como la función fillRect , y puedo dibujar correctamente.

Cualquier consejo es probablemente útil gracias