Triangle Canvas

HTML

<html> 
<head>
  <script type="application/javascript">
function init() {
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");

      ctx.translate(0.5, 0.5)
      
//define the colour of the line
ctx.strokeStyle = "red";

//define the starting point of line1 (x1,y1)
ctx.moveTo(150,300);

      
//define the end point of line1 (x2,y2)
ctx.lineTo(0,0);

      
//define the end point of line1 (x2,y2)
ctx.lineTo(300,300);


//draw the points that makeup the triangle - (x1,y1) to (x2,y2), (x2,y2) to (x3,y3),  and (x3,y3) to (x1,y1)
ctx.stroke();
}
}
  </script>
  </head>
<body onload="init();">
<canvas id="canvas" width="900" height="500"></canvas><br>
</body>
</html>