HTML canvas lineJoin Property

❮ HTML canvas Reference

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();

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";



Browser Support




Status







Property Values

Value Description
bevel Creates a beveled corner.
round Creates a rounded corner.
miter Default. Creates a sharp corner.
❮ HTML canvas Reference