lineJoin

Summary

Defines the type of corners the user agent will place where two lines meet.

Property of apis/canvas/CanvasRenderingContext2Dapis/canvas/CanvasRenderingContext2D

Syntax

var result = CanvasRenderingContext2D.lineJoin;
CanvasRenderingContext2D.lineJoin = value;

Return Value

Returns an object of type StringString

Valid values are:

• “bevel”
• “round”
• “miter”

Examples

The following example shows the different lineJoin options

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  var lineJoin = ['round','bevel','miter'];
  ctx.lineWidth = 10;
  for (var i=0;i<lineJoin.length;i++){
    ctx.lineJoin = lineJoin[i];
    ctx.beginPath();
    ctx.moveTo(-5,5+i*40);
    ctx.lineTo(35,45+i*40);
    ctx.lineTo(75,5+i*40);
    ctx.lineTo(115,45+i*40);
    ctx.lineTo(155,5+i*40);
    ctx.stroke();
  }
}

Related specifications

W3C HTML Canvas 2D Specification

W3C Candidate Recommendation

Attributions

• Mozilla Developer Network : Article

• Microsoft Developer Network: Windows Internet Explorer API reference Article