Canvas Shapes
<!DOCTYPE html> <html> <body> <canvas id="scene" width="300" height="200" style="border:1px solid #ccc;"></canvas> <script> const canvas = document.getElementById('scene'); const ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.moveTo(50, 140); // starting point, nothing drawn yet ctx.lineTo(150, 140); // bottom edge of the triangle ctx.lineTo(100, 40); // up to the peak ctx.closePath(); // straight line back to (50, 140) ctx.strokeStyle = '#2563eb'; ctx.lineWidth = 3; ctx.stroke(); </script> </body> </html>