Tutorials References Exercises Bootcamp Menu
Sign Up Create Website Get Certified Pro

HTML canvas lineJoin Property

❮ HTML Canvas Reference


Create a rounded corner when the two lines meet:



var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.lineJoin = "round";
ctx.moveTo(20, 20);
ctx.lineTo(100, 50);
ctx.lineTo(20, 100);
Try it Yourself »

Browser Support

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

lineJoin Yes 9.0 Yes Yes Yes

Definition and Usage

The lineJoin property sets or returns the type of corner created, when two lines meet.

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

Default value: miter
JavaScript syntax: context.lineJoin="bevel|round|miter";

Property Values

Value Description Play it
bevel Creates a beveled corner Play it »
round Creates a rounded corner Play it »
miter Default. Creates a sharp corner Play it »

❮ HTML Canvas Reference