How to set line join style

Description

The lineJoin property determines how lines that join one another are drawn.

There are three values:

round,
bevel
miter.

The default value is miter.

Example


<!DOCTYPE HTML>
<html>
<head>
<style>
canvas {<!--from  ww  w  . j a v a  2 s.  co  m-->
      border: thin solid black;
      margin: 4px
}
</style>
</head>
<body>
      <canvas id="canvas" width="500" height="500"> 
      Your browser doesn't support the <code>canvas</code> element 
      </canvas>
      <script>
            var ctx = document.getElementById("canvas").getContext("2d");
            ctx.lineWidth = 20;
            ctx.lineJoin = "round";
            ctx.strokeRect(20, 30, 100, 100);
            ctx.lineJoin = "bevel";
            ctx.strokeRect(160, 20, 100, 100);
            ctx.lineJoin = "miter";
            ctx.strokeRect(300, 30, 130, 100);
      </script>
</body>
</html>