recursal/MDN huggingface dataset:
CanvasRenderingContext2D.moveTo()
=================================

La méthode **`CanvasRenderingContext2D.moveTo()`** de l'API Canvas 2D déplace le point de départ d'un nouveau sous-chemin vers les coordonnées `(x, y)`.

Syntaxe
-------


```js
void ctx.moveTo(x, y);
```

### Paramètres

`x`

L'axe des x du point.

`y`

L'axe des y du point.

Exemples
--------

### Utiliser la méthode `moveTo`

Ceci est un simple snippet de code qui utilise la méthode `moveTo` pour déplacer le stylo à une position de départ pour dessiner une ligne.

#### HTML


```html
<canvas id="canvas"></canvas>
```


#### JavaScript


```js
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(200, 50);
ctx.stroke();
```


Éditez le code ci-dessous pour voir vos changements mettre à jour le canvas en direct:

#### Code jouable
```

<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
  <input id="edit" type="button" value="Edit" />
  <input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
ctx.beginPath();
ctx.moveTo(50,50);
ctx.lineTo(200, 50);
ctx.stroke()</textarea
>
```


```
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var edit = document.getElementById("edit");
var code = textarea.value;

function drawCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  eval(textarea.value);
}

reset.addEventListener("click", function () {
  textarea.value = code;
  drawCanvas();
});

edit.addEventListener("click", function () {
  textarea.focus();
});

textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);
```

Spécifications
--------------

| Specification |
| --- |
| HTML Standard # dom-context-2d-moveto-dev |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* L'interface qui définit cette méthode, `CanvasRenderingContext2D`
* `CanvasRenderingContext2D.lineTo()`
* `CanvasRenderingContext2D.stroke()`
CanvasRenderingContext2D.strokeRect()
=====================================

La méthode **`CanvasRenderingContext2D.strokeRect()`** de l'API 2D des Canvas dessine le contour d'un rectangle aux coordonnées de l'angle haut gauche *(x, y)* et aux dimensions déterminées par *largeur* et *hauteur* dans la balise canvas, et en utilisant l'actuel `strokeStyle`.

Syntaxe
-------


```js
void ctx.strokeRect(x, y, largeur, hauteur);
```

### Paramètres

`x`

L'abcisse *x* des coordonnées du point de départ du rectangle.

`y`

L'ordonnée *y* des coordonnées du point de départ du rectangle.

largeur

La largeur du rectangle.

`hauteur`

La hauteur de rectangle.

Exemples
--------

### Utilisation de la méthode `strokeRect`

Ceci est juste un extrait de code qui utilise la méthode `strokeRect`.

#### HTML


```html
<canvas id="canvas"></canvas>
```


#### JavaScript


```js
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.strokeStyle = "green";
ctx.strokeRect(10, 10, 100, 100);
```


Éditez le code suivant pour voir les changements en direct dans la balise canvas:

#### Code jouable
```

<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
  <input id="edit" type="button" value="Edit" />
  <input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
ctx.strokeStyle = "green";
ctx.strokeRect(10, 10, 100, 100);</textarea
>
```


```
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var edit = document.getElementById("edit");
var code = textarea.value;

function drawCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  eval(textarea.value);
}

reset.addEventListener("click", function () {
  textarea.value = code;
  drawCanvas();
});

edit.addEventListener("click", function () {
  textarea.focus();
});

textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);
```

Spécifications
--------------

| Specification |
| --- |
| HTML Standard # dom-context-2d-strokerect-dev |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* l'interface qui la définit, `CanvasRenderingContext2D`
* `CanvasRenderingContext2D.strokeStyle`
* `CanvasRenderingContext2D.clearRect()`
* `CanvasRenderingContext2D.fillRect()`
CanvasRenderingContext2D.setLineDash()
======================================

La méthode **`setLineDash()`** de l'interface Canvas 2D API's `CanvasRenderingContext2D` définit le modèle à utiliser pour les pointillés lors du dessin de la ligne, en utilisant un tableau de valeurs qui spécifie les longueurs des alternances entre pleins et creux.

**Note :** Pour renvoyer une ligne pleine, configurez la liste pour les pointillés avec un tableau vide.

Syntaxe
-------


```js
ctx.setLineDash(segments);
```

### Paramètres

`segments`

Un tableau `Array` de nombres qui spécifie les distances qui vont alternativement dessiner pleins et creux (dans l'unité du système de coordonnées). Si le nombre d'éléments du tableau est impair, les éléments du tableau sont recopiés et concaténés. Par exemple, `[5, 15, 25]` est transformé en `[5, 15, 25, 5, 15, 25]`. Si le tableau est vide, le pointillé est supprimé, et la ligne devient pleine.

### Valeur de retour

`undefined`.

Exemples
--------

C'est simplement un fragment de code qui utilise la méthode `setLineDash()` pour dessiner une ligne pointillée au dessus d'une ligne pleine.

### HTML


```html
<canvas id="canvas"></canvas>
```

### JavaScript


```js
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.setLineDash([5, 15]);
ctx.moveTo(0, 50);
ctx.lineTo(400, 50);
ctx.stroke();

ctx.beginPath();
ctx.setLineDash([]);
ctx.moveTo(0, 150);
ctx.lineTo(400, 150);
ctx.stroke();
```

### Essayez le

Editez le code ci-dessous et observez les changements se produire dans le canvas:

#### Code jouable
```

<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
  <input id="edit" type="button" value="Edit" />
  <input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code" style="height:150px">
ctx.beginPath();
ctx.setLineDash([5, 15]);
ctx.moveTo(0, 50);
ctx.lineTo(400, 50);
ctx.stroke();

ctx.beginPath();
ctx.setLineDash([]);
ctx.moveTo(0, 150);
ctx.lineTo(400, 150);
ctx.stroke();</textarea
>
```


```
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var edit = document.getElementById("edit");
var code = textarea.value;

function drawCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  eval(textarea.value);
}

reset.addEventListener("click", function () {
  textarea.value = code;
  drawCanvas();
});

edit.addEventListener("click", function () {
  textarea.focus();
});

textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);
```

Spécifications
--------------

| Specification |
| --- |
| HTML Standard # dom-context-2d-setlinedash-dev |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* L'interface qui la définit, `CanvasRenderingContext2D`
* `CanvasRenderingContext2D.getLineDash()` (en-US)
* `CanvasRenderingContext2D.lineDashOffset` (en-US)
CanvasRenderingContext2D.direction
==================================

**Expérimental:** **Cette fonction est expérimentale**  
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.  
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

La propriété **`CanvasRenderingContext2D.direction`** de l'API Canvas 2D indique la direction de texte courante utilisé lors du dessin de texte.

Syntaxe
-------


```js
ctx.direction = "ltr" || "rtl" || "inherit";
```

### Options

Valeurs possibles :

ltr

La direction du texte est de gauche à droite.

rtl

La direction du texte est de droite à gauche.

inherit

La direction du texte est héritée de l'élément `<canvas>` ou du `Document` comme approprié.

La valeur par défaut est `inherit`.

Exemples
--------

### Utilisation de la propriété `direction`

Ceci est seulement un fragment de code simple utilisant la propriété `direction` pour indiquer un réglage de ligne de base différent.

#### HTML


```html
<canvas id="canvas"></canvas>
```


#### JavaScript


```js
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.font = "48px serif";
ctx.direction = "ltr";
ctx.strokeText("Hello world", 0, 100);
```


Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas :

#### Code jouable
```

<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
  <input id="edit" type="button" value="Edit" />
  <input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
ctx.font = '48px serif';
ctx.direction = 'ltr';
ctx.strokeText('Hello world', 0, 100);</textarea
>
```


```
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var edit = document.getElementById("edit");
var code = textarea.value;

function drawCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  eval(textarea.value);
}

reset.addEventListener("click", function () {
  textarea.value = code;
  drawCanvas();
});

edit.addEventListener("click", function () {
  textarea.focus();
});

textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);
```

Spécifications
--------------

| Specification |
| --- |
| HTML Standard # dom-context-2d-direction-dev |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* L'interface la définissant, `CanvasRenderingContext2D`.
CanvasRenderingContext2D.setTransform()
=======================================

La méthode **`CanvasRenderingContext2D.setTransform()`** de l'API Canvas 2D réinitialise (remplace) la transformation en cours à la matrice identité et appelle ensuite la transformation décrite par les arguments de cette méthode.

Voir aussi la méthode `transform()`, qui ne replace pas la matrice de transformation en cours et la multiplie par celle donnée..

Syntaxe
-------


```js
void ctx.setTransform(a, b, c, d, e, f);
```


La matrice de transformation est décrite par : 


[

a

c

e

b

d

f

0

0

1

]

\left[ \begin{array}{ccc} a & c & e \ b & d & f \ 0 & 0 & 1 \end{array} \right]

### Paramètres

`a (m11)`

Échelle horizontale.

*`b (m12)`*

Inclinaison horizontale.

`c (m21)`

Inclinaison verticale.

`d (m22)`

Échelle verticale.

`e (dx)`

Déplacement horizontal.

`f (dy)`

Déplacement vertical.

Exemples
--------

### Utilisation de la méthode `setTransform`

Ceci est seulement un fragment de code simple qui utilise la méthode `setTransform`.

#### HTML


```html
<canvas id="canvas"></canvas>
```


#### JavaScript


```js
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.setTransform(1, 1, 0, 1, 0, 0);
ctx.fillRect(0, 0, 100, 100);
```


Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas :

#### Code jouable
```

<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
  <input id="edit" type="button" value="Edit" />
  <input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
ctx.setTransform(1,1,0,1,0,0);
ctx.fillRect(0,0,100,100);</textarea
>
```


```
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var edit = document.getElementById("edit");
var code = textarea.value;

function drawCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  eval(textarea.value);
}

reset.addEventListener("click", function () {
  textarea.value = code;
  drawCanvas();
});

edit.addEventListener("click", function () {
  textarea.focus();
});

textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);
```

Spécifications
--------------

| Specification |
| --- |
| HTML Standard # dom-context-2d-settransform-dev |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* L'interface la définissant, `CanvasRenderingContext2D`
* `CanvasRenderingContext2D.transform()`
CanvasRenderingContext2D.fillRect()
===================================

La méthode **`CanvasRenderingContext2D.fillRect()`** de l'API 2D des Canvas dessine un rectangle plein aux coordonnées *(x, y)*, aux dimensions déterminées par *largeur* et *hauteur* et au style déterminé par l'attribut `fillStyle`.

Syntaxe
-------


```js
void ctx.fillRect(x, y, largeur, hauteur);
```

### Paramètres

`x`

L'ordonnée *x* des coordonnées du point de départ du rectangle.

`y`

L'abscisse *y* des coordonnées du point de départ du rectangle.

`largeur`

La largeur du rectangle.

`hauteur`

La hauteur de rectangle.

Exemples
--------

### Utilisation de la méthode `fillRect`

Ceci est juste un extrait de code qui utilise la méthode `fillRect`.

#### HTML


```html
<canvas id="canvas"></canvas>
```


#### JavaScript


```js
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "green";
ctx.fillRect(10, 10, 100, 100);

// remplir la balise entièrement
// ctx.fillRect(0, 0, canvas.width, canvas.height);
```


Éditez le code suivant pour voir les changements en direct dans la balise canvas:

#### Code jouable
```

<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
  <input id="edit" type="button" value="Edit" />
  <input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
ctx.fillStyle = "green";
ctx.fillRect(10, 10, 100, 100);</textarea
>
```


```
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var edit = document.getElementById("edit");
var code = textarea.value;

function drawCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  eval(textarea.value);
}

reset.addEventListener("click", function () {
  textarea.value = code;
  drawCanvas();
});

edit.addEventListener("click", function () {
  textarea.focus();
});

textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);
```

Spécifications
--------------

| Specification |
| --- |
| HTML Standard # dom-context-2d-fillrect-dev |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* L'interface qui le définit, `CanvasRenderingContext2D`
* `CanvasRenderingContext2D.fillStyle`
* `CanvasRenderingContext2D.clearRect()`
* `CanvasRenderingContext2D.strokeRect()`
CanvasRenderingContext2D.rotate()
=================================

La méthode **`CanvasRenderingContext2D.rotate()`** de l'API Canvas 2D ajoute une rotation à la matrice de transformation. L'argument `angle` représente un angle de rotation horaire et il est exprimé en radians.

Syntaxe
-------


```js
void ctx.rotate(angle);
```


![](/fr/docs/Web/API/CanvasRenderingContext2D/rotate/canvas_grid_rotate.png)

### Paramètres

`angle`

L'angle de rotation horaire en radians. Vous pouvez utiliser `degrés * Math.PI / 180` si vous voulez faire la conversion à partir d'une valeur en degrés.

Le centre de la rotation est toujours l'origine du canevas. Pour changer le centre, il faudra déplacer le canevas en utilisant la méthode `translate()`.

Exemples
--------

### Utilisation de la méthode `rotate`

Ceci est seulement un fragment de code simple qui utilise la méthode `rotate`.

#### HTML


```html
<canvas id="canvas"></canvas>
```


#### JavaScript


```js
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.rotate((45 \* Math.PI) / 180);
ctx.fillRect(70, 0, 100, 30);

// réinitialise la matrice de transformation courante à la matrice identité
ctx.setTransform(1, 0, 0, 1, 0, 0);
```


Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas:

#### Code jouable
```

<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
  <input id="edit" type="button" value="Edit" />
  <input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
ctx.rotate(45 * Math.PI / 180);
ctx.fillRect(70,0,100,30);
ctx.setTransform(1, 0, 0, 1, 0, 0);</textarea
>
```


```
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var edit = document.getElementById("edit");
var code = textarea.value;

function drawCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  eval(textarea.value);
}

reset.addEventListener("click", function () {
  textarea.value = code;
  drawCanvas();
});

edit.addEventListener("click", function () {
  textarea.focus();
});

textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);
```

Spécifications
--------------

| Specification |
| --- |
| HTML Standard # dom-context-2d-rotate-dev |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* L'interface la définissant, `CanvasRenderingContext2D`
CanvasRenderingContext2D.getImageData()
=======================================

La méthode **`CanvasRenderingContext2D.getImageData()`** de l'API Canvas 2D retourne un objet `ImageData` représentant les données de pixels sous-jacentes pour la zone du canevas désigné par le rectangle qui commence aux positions *(sx, sy)* et qui possède des attributs : *largeur (sw) et hauteur (sh)*. Cette méthode n'est pas affectée par la matrice de transformation du canevas.

Les pixels en dehors de la zone de canevas sont présents sous forme de valeurs noires transparentes dans les données d'image renvoyées.

Syntaxe
-------


```js
ImageData ctx.getImageData(sx, sy, sw, sh);
```

### Paramètres

`sx`

La coordonnée x du coin supérieur gauche du rectangle à partir duquel *ImageData* sera extrait.

`sy`

La coordonnée y du coin supérieur gauche du rectangle à partir duquel *ImageData* sera extrait.

`sw`

La largeur du rectangle à partir duquel *ImageData* sera extrait.

`sh`

La hauteur du rectangle à partir duquel *ImageData* sera extrait.

### Valeur retournée

Un objet `ImageData` contenant les données de l'image pour le rectangle donné du canevas.

### Erreurs renvoyées

`IndexSizeError`

Renvoyé si l'un des arguments de largeur ou de hauteur est égal à zéro.

Exemples
--------

### Utilisation de la méthode `getImageData`

Ceci est juste un petit exemple qui utilise la méthode getImageData. Pour plus d'informations, visitez Manipulation de pixels avec canvas et l'objet `ImageData`.

#### HTML


```html
<canvas id="canvas"></canvas>
```


#### JavaScript


```js
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.rect(10, 10, 100, 100);
ctx.fill();

console.log(ctx.getImageData(50, 50, 100, 100));
// ImageData { largeur: 100, hauteur: 100, données: Uint8ClampedArray[40000] }
```

Spécifications
--------------

| Specification |
| --- |
| HTML Standard # dom-context-2d-getimagedata-dev |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* L'interface le définissant : `CanvasRenderingContext2D`.
* `ImageData`
* Manipulation de pixels avec canvas
CanvasRenderingContext2D.lineJoin
=================================

La propriété **`CanvasRenderingContext2D.lineJoin`** de l'API Canvas 2D détermine la forme à utiliser pour joindre deux segments de ligne à leur intersection.

Cette propriété n'a aucun effet quand deux segments connectés ont la même direction, car aucune zone de jonction ne sera ajoutée dans ce cas. Les segments dégénérés d'une longueur de zéro (c'est à dire avec les extrémités à la même position) seront ignorés.

**Note :** Les lignes peuvent être dessinées aves les méthodes `stroke()`, `strokeRect()` et `strokeText()`.

Syntaxe
-------


```js
ctx.lineJoin = "bevel" || "round" || "miter";
```

### Options

Il y a trois valeurs possibles pour cette propriété: `"round"`, `"bevel"` et `"miter"`. Celle par défaut est `"miter"`.

![](/fr/docs/Web/API/CanvasRenderingContext2D/lineJoin/canvas_linejoin.png)

`"round"` (rond)

Arrondit les coins d'une forme en remplissant un zone supplémentaire centré sur le point final commun des segments connectés. Le rayon de ces coins arrondis est égal à la largeur de la ligne .

`"bevel"` (biseau)

Remplit une zone triangulaire supplémentaire entre les extrémités des segments connectés.

`"miter"` (onglet)

Les segments raccordés sont reliés entre eux en prolongeant leurs bors extérieurs en un seul point, ce qui a pour effet de remplir uen zone supplémentaire en forme de losange. Ce paramètre est affecté par la proriété `miterLimit` (en-US). Valeur par dafaut.

Exemples
--------

### Modifier les jointures d'un tracé

Cet exemple applique des jointures arrondies au tracé.

#### HTML


```html
<canvas id="canvas"></canvas>
```


#### JavaScript


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

ctx.lineWidth = 20;
ctx.lineJoin = "round";
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(190, 100);
ctx.lineTo(280, 20);
ctx.lineTo(280, 150);
ctx.stroke();
```


#### Résultat

### Comparaison des jointures de lignes

L'exemple dessine 3 tracés différents, illustrant chacune des trois valeurs de `lineJoin`.
```

<canvas id="canvas" width="150" height="150"></canvas>
```



```js
var ctx = document.getElementById("canvas").getContext("2d");
var lineJoin = ["round", "bevel", "miter"];
ctx.lineWidth = 10;

for (let i = 0; i < lineJoin.length; i++) {
  ctx.lineJoin = lineJoin[i];
  ctx.beginPath();
  ctx.moveTo(-5, 5 + i \* 40);
  ctx.lineTo(35, 45 + i \* 40);
  ctx.lineTo(75, 5 + i \* 40);
  ctx.lineTo(115, 45 + i \* 40);
  ctx.lineTo(155, 5 + i \* 40);
  ctx.stroke();
}
```


| Screenshot | Live sample |
| --- | --- |
|  |  |

Spécifications
--------------

| Specification |
| --- |
| HTML Standard # dom-context-2d-linejoin-dev |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* L'interface définissant cette propriété: `CanvasRenderingContext2D`
* `CanvasRenderingContext2D.lineCap`
* `CanvasRenderingContext2D.lineWidth` (en-US)
* Ajout de styles et de couleurs