HTML5 Canvas Line Join Tutorial

To set the line join style of an HTML5 Canvas path, we can set the lineJoin context property. Paths can have one of three line joins: miter, round, or bevel. Unless otherwise specified, the HTML5 Canvas line join property is defaulted with the miter style.

Note: If your lines are fairly thin and don't connect at steep angles, it may be difficult to distinguish different line joins.

Open in new window

Code Editor

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

// set line width for all lines
      context.lineWidth = 25;

// miter line join (left)
      context.beginPath();
      context.moveTo(99, 150);
      context.lineTo(149, 50);
      context.lineTo(199, 150);
      context.lineJoin = 'miter';
      context.stroke();

// round line join (middle)
      context.beginPath();
      context.moveTo(239, 150);
      context.lineTo(289, 50);
      context.lineTo(339, 150);
      context.lineJoin = 'round';
      context.stroke();

// bevel line join (right)
      context.beginPath();
      context.moveTo(379, 150);
      context.lineTo(429, 50);
      context.lineTo(479, 150);
      context.lineJoin = 'bevel';
      context.stroke();
    </script>
  </body>
</html>

< Path Rounded Corners >

More Examples

Modified on April 8th, 2013 by Eric Rowell