Latest web development tutorials
 

HTML canvas lineJoin Propery

< Canvas Object

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 4.0 9.0 3.6 4.0 10.1

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 »

< Canvas Object