HTML5 Canvas Reference - lineJoin








lineJoin attributes context.lineJoin sets and gets the "corner" that is created when two lines meet.

We can set its basic properties with the lineJoin Canvas attribute:

  • miter - The default; an edge is drawn at the join.
  • bevel - A diagonal edge is drawn at the join.
  • round - A round edge is drawn at the join.

The "miter" value is affected by the miterLimit property.





Browser compatibility

lineJoin Yes Yes Yes Yes Yes

JavaScript syntax

context.lineJoin='bevel|round|miter';

Property Values

Value Description
bevel Creates a beveled corner
round Creates a rounded corner
miter Default value. Creates a sharp corner




Example

The following code creates a rounded corner when the two lines meet:


<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="150"></canvas>
<script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.beginPath();<!--from  www . j  a  v  a 2 s .c  o m-->
    ctx.lineWidth = 10;
    ctx.lineJoin = "round";
    ctx.moveTo(20, 20);
    ctx.lineTo(100, 50);
    ctx.lineTo(20, 100);
    ctx.stroke();
</script>
</body>
</html>

The code above is rendered as follows:

Example 2

The following code draws lines in three line cap styles and then it also draw three line join styles.


<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="500" height="150"></canvas>
<script>
   canvas  = document.getElementById("myCanvas"); 
   context = canvas.getContext("2d");
<!--  w ww .  j  av  a  2  s .  c o  m-->
   var width  = 60;
   var height = 75;
   var gap    = 50;

   context.strokeStyle   = "red";
   context.lineWidth     = 20;
   context.shadowOffsetX = 4;  
   context.shadowOffsetY = 4;
   context.shadowBlur    = 7;
   context.shadowColor   = "gray";

   //       xStart yStart cap
   drawLine(25,    25,    "butt"  );
   drawLine(25,    75,    "square");
   drawLine(25,    125,   "round" );

   // A5. DRAW joins.
   //       xStart                 yStart join
   drawJoin(175+(0*gap)+(0*width), 120,   "miter");
   drawJoin(175+(1*gap)+(1*width), 120,   "bevel");
   drawJoin(175+(2*gap)+(2*width), 120,   "round");

   // B. LINE DRAWING function.
   function drawLine(xStart, yStart, cap)
   {
      context.lineCap = cap;

      context.beginPath();
      context.moveTo(xStart,           yStart);
      context.lineTo(xStart+1.5*width, yStart);
      context.stroke();
   }
   function drawJoin(xStart, yStart, join)
   {
      context.lineCap  = "round";

      context.beginPath();
      context.moveTo(xStart,           yStart);
      context.lineTo(xStart+(width/2), yStart-height);
      context.lineTo(xStart+width,     yStart);
      context.lineJoin = join;
      context.stroke();
   }
</script>
</body>
</html>

The code above is rendered as follows: