Lines

by Markerleffe

HTML

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes -->

<html>
 <body onload="draw();">
   <canvas id="canvas" width="150" height="150"></canvas>
 </body>
</html>

JavaScript

function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');

    // Filled triangle
    ctx.beginPath();
    ctx.moveTo(25, 25);
    ctx.lineTo(105, 25);
    ctx.lineTo(25, 105);
    ctx.fill();

    // Stroked triangle
    ctx.beginPath();
    ctx.moveTo(260,80);
ctx.lineTo(250,110);
ctx.moveTo(250,110);
ctx.lineTo(220,120);
ctx.moveTo(220,120);
ctx.lineTo(250,130);
ctx.moveTo(250,130);
ctx.lineTo(260,180);
ctx.moveTo(260,180);
ctx.lineTo(270,130);
ctx.moveTo(270,130);
ctx.lineTo(300,120);
ctx.moveTo(300,120);
ctx.lineTo(270,110);
ctx.moveTo(270,110);
ctx.lineTo(260,80);
    ctx.closePath();
    ctx.stroke();
  }
}