HTML canvas lineJoin Property

Example

// Accessing the element
let c = document.getElementById("myCanvas");

// Styling canvas
let ctx = c.getContext("2d");
ctx.beginPath();
ctx.lineJoin = "round";
ctx.moveTo(25, 25);
ctx.lineTo(100, 50);
ctx.lineTo(25, 100);
ctx.stroke();

Try this code ❯

Meaning

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

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

Standard Syntax

Default value:

miter

JavaScript syntax:

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

Property Values

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