Menu
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

Canvas lineJoin Property

❮ Canvas Reference

Example

Create a rounded corner where the two lines meet:

YourbrowserdoesnotsupporttheHTML5canvastag.

JavaScript:

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

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

Description

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

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

Note

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)


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 »

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