Canvas lineJoin attribute

Definition and usage

lineJoin The attribute sets or returns the type of corner created when two lines intersect.

Note:The value "miter" is affected by miterLimit The effect of the attribute.

Example

When two lines intersect, create a rounded corner:

Your browser does not support the canvas tag.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.lineJoin="round";
ctx.moveTo(20,20);
ctx.lineTo(100,50);
ctx.lineTo(20,100);
ctx.stroke();

Try it yourself

Syntax

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

Attribute value

Value Description
bevel Create chamfered corners.
round Create rounded corners.
miter Default. Create sharp angles.

Technical Details

Default Value: miter

Browser Support

The numbers in the table indicate the first browser version that fully supports this property.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Note:Internet Explorer 8 and earlier versions do not support the <canvas> element.