Attribut lineCap du canvas HTML

Définition et utilisation

lineCap Définit ou retourne le style de la pointe de la ligne à l'extrémité.

Remarque :"round" et "square" rend la ligne légèrement plus longue.

Exemple

Fin de la ligne de cap pour le cercle :

Votre navigateur ne prend pas en charge la balise canvas.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.lineCap="round";
ctx.moveTo(20,20);
ctx.lineTo(20,200);
ctx.stroke();

Essayez-le vous-même

Syntaxe

context.lineCap="butt|round|square";

Valeur de l'attribut

Valeur Description
butt Par défaut. Ajoutez des bords droits à chaque extrémité de la ligne.
round Ajoutez des têtes de ligne rondes à chaque extrémité de la ligne.
square Ajoutez des têtes de ligne rectangulaires à chaque extrémité de la ligne.

Détails techniques

Valeur par défaut : butt

Prise en charge du navigateur

Les numéros dans le tableau indiquent la version du navigateur qui prend en charge cette propriété pour la première fois.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Remarque :Les versions 8 d'Internet Explorer et antérieures ne prennent pas en charge l'élément <canvas>.