Propriété lineJoin du Canvas

❮ Référence Canvas

Exemple

Créez un coin arrondi là où les deux lignes se rencontrent :

Votre navigateur ne prend pas en charge la balise HTML5 canvas.

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();
Essayez-le vous-même »

Description

La propriété lineJoin définit ou renvoie le type de coin créé lorsque deux lignes se rencontrent.

Valeurs légales : bevel, round et miter (par défaut).

Remarque

La valeur "miter" est influencée par la propriété miterLimit .

Voir aussi :

La propriété lineCap (Définir les capuchons de fin)

La propriété lineJoin (Définir les capuchons de jointure)

La propriété lineWidth (Définir les capuchons de jointure)

La propriété fillStyle (Définir la couleur/style de remplissage)

La propriété strokeStyle (Définir la couleur/style de trait)


Syntaxe

context .lineJoin = "bevel|round|miter"

Valeurs de propriété

Valeur Description Jouez-le
bevel Crée un coin biseauté Jouez-le »
round Crée un coin arrondi Jouez-le »
miter Par défaut. Crée un coin aigu Jouez-le »

Support des navigateurs

L'élément <canvas> est une norme HTML5 (2014).

lineJoin est pris en charge dans tous les navigateurs modernes :

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

❮ Référence Canvas