Tutorials References Menu

HTML canvas lineJoin Property

❮ HTML Canvas Reference

Example

Create a rounded corner when the two lines meet:

YourbrowserdoesnotsupporttheHTML5canvastag.

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 »

Browser Support

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

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