HTML5 Canvas Line Join Tutorial

Description

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.

<!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>

Demo

Next Tutorial: Rounded Corners

Canvas Cheat Sheet

HTML5 Canvas Line Join Tutorial

Description

Demo