Tutorials Exercises Get Certified Services Menu
Log in
Sign Up Spaces Bootcamps

Canvas lineJoin Property

❮ Canvas Reference


Create a rounded corner where the two lines meet:



const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

ctx.lineJoin = "round";
ctx.moveTo(20, 20);
ctx.lineTo(100, 50);
ctx.lineTo(20, 100);
Try it Yourself »


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

Legal values: bevel, round, and miter (default).


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

See Also:

The lineCap Property (Set end caps)

The lineJoin Property (Set join caps)

The lineWidth Property (Set join caps)

The fillStyle Property (Set fill color/style)

The strokeStyle Property (Set stroke color/style)


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 »

Browser Support

The <canvas> element is an HTML5 standard (2014).

lineJoin is supported in all modern browsers:

Chrome Edge Firefox Safari Opera IE
Yes Yes Yes Yes Yes 9-11

❮ Canvas Reference