---
title: CanvasRenderingContext2D.bezierCurveTo()
slug: Web/API/CanvasRenderingContext2D/bezierCurveTo
tags:
  - 2D
  - API
  - Bézier
  - Canevas
  - Canvas
  - CanvasRenderingContext2D
  - Courbe
  - Courbe cubique
  - Courbe cubique de Bézier
  - Courbe de Bézier
  - Méthode
  - contexte
translation_of: Web/API/CanvasRenderingContext2D/bezierCurveTo
---
<div>{{APIRef}}</div>

<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.bezierCurveTo()</code></strong> de l'API Canvas 2D ajoute une <a href="https://en.wikipedia.org/wiki/B%C3%A9zier_curve">courbe de Bézier</a> cubique au sous-chemin courant. Elle requiert trois points : les deux premiers sont des points de contrôle et le troisième est le point d'arrivée. Le point de départ est le dernier point dans le chemin courant, qui peut être changé au moyen de la méthode {{domxref("CanvasRenderingContext2D.moveTo", "moveTo()")}} avant de créer une courbe de Bézier.</p>

<h2 id="Syntaxe">Syntaxe</h2>

<pre class="syntaxbox">void <em>contexte2D</em>.bezierCurveTo(<em>pointContrôle1X</em>, <em>pointContrôle1Y</em>, <em>pointContrôle2X</em>, <em>pointContrôle2Y</em>, <em>pointArrivéeX</em>, <em>pointArrivéeY</em>);
</pre>

<h3 id="Paramètres">Paramètres</h3>

<dl>
 <dt><code>pointContrôle1X</code></dt>
 <dd>La coordonnée en x du premier point de contrôle.</dd>
 <dt><code>pointContrôle1Y</code></dt>
 <dd>La coordonnée en y du premier point de contrôle.</dd>
 <dt><code>pointContrôle2X</code></dt>
 <dd>La coordonnée en x du second point de contrôle.</dd>
 <dt><code>pointContrôle2Y</code></dt>
 <dd>La coordonnée en y du second point de contrôle.</dd>
 <dt><code>pointArrivéeX</code></dt>
 <dd>La coordonnée en x du point d'arrivée.</dd>
 <dt><code>pointArrivéeY</code></dt>
 <dd>La coordonnée en y du point d'arrivée.</dd>
</dl>

<h2 id="Exemples">Exemples</h2>

<h3 id="Comment_bezierCurveTo_fonctionne">Comment bezierCurveTo fonctionne</h3>

<p>Cet exemple montre comment une courbe cubique de Bézier est dessinée.</p>

<h4 id="HTML">HTML</h4>

<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
</pre>

<h4 id="JavaScript">JavaScript</h4>

<pre class="brush: js; highlight:[14]">// Définit le canevas et son contexte 2D
const canevas = document.getElementById("canvas");
const contexte2D = canevas.getContext("2d");

// Define the points as {x, y}
let pDépart    = { x: 50,  y: 20  };
let pContrôle1 = { x: 230, y: 30  };
let pContrôle2 = { x: 150, y: 80  };
let pArrivée   = { x: 250, y: 100 };

// Courbe cubique de Bézier
contexte2D.beginPath();
contexte2D.moveTo(start.x, start.y);
contexte2D.bezierCurveTo(pContrôle1.x, pContrôle1.y, pContrôle2.x, pContrôle2.y, pArrivée.x, pArrivée.y);
contexte2D.stroke();

// Points de départ et d'arrivée
contexte2D.fillStyle = 'blue';
contexte2D.beginPath();
contexte2D.arc(pDépart.x, pDépart.y, 5, 0, 2 * Math.PI);   // Point de départ
contexte2D.arc(pArrivée.x, pArrivée.y, 5, 0, 2 * Math.PI); // Point d'arrivée
contexte2D.fill();

// Points de contrôle
contexte2D.fillStyle = 'red';
contexte2D.beginPath();
contexte2D.arc(pContrôle1.x, pContrôle1.y, 5, 0, 2 * Math.PI);  // Point de contrôle 1
contexte2D.arc(pContrôle2.x, pContrôle2.y, 5, 0, 2 * Math.PI);  // Point de contrôle 2
contexte2D.fill();</pre>

<h4 id="Résultat">Résultat</h4>

<p>Dans cet exemple, les <span style="color: red;">points de contrôle sont rouges</span> et les <span style="color: blue;">points de départ et d'arrivée sont bleus</span>.</p>

<p>{{ EmbedLiveSample('How_bezierCurveTo_works', 315, 165) }}</p>

<h3 id="Une_simple_courbe_cubique_de_Bézier">Une simple courbe cubique de Bézier</h3>

<p>Cet exemple dessine une simple courbe cubique de Bézier en utilisant <code>bezierCurveTo()</code>.</p>

<h4 id="HTML_2">HTML</h4>

<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
</pre>

<h4 id="JavaScript_2">JavaScript</h4>

<p>La courbe débute au point spécifiée par <code>moveTo()</code>: (30, 30). Le premier point de contrôle est placé à (120, 160), le second à (180, 10) et le point d'arrivée à (220, 140).</p>

<pre class="brush: js; highlight:[6]">const canevas = document.getElementById("canvas");
const contexte2D = canevas.getContext("2d");

contexte2D.beginPath();
contexte2D.moveTo(30, 30);
contexte2D.bezierCurveTo(120,160, 180,10, 220,140);
contexte2D.stroke();</pre>

<h4 id="Résultat_2">Résultat</h4>

<p>{{ EmbedLiveSample('A_simple_Bézier_curve', 700, 180) }}</p>

<h2 id="Spécifications">Spécifications</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Spécification</th>
   <th scope="col">Statut</th>
   <th scope="col">Commentaire</th>
  </tr>
  <tr>
   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-beziercurveto", "CanvasRenderingContext2D.beziercurveto")}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>



<p>{{Compat("api.CanvasRenderingContext2D.bezierCurveTo")}}</p>

<h2 id="Voir_aussi">Voir aussi</h2>

<ul>
 <li>L'interface définissant cette méthode : {{domxref("CanvasRenderingContext2D")}}</li>
 <li><a href="http://en.wikipedia.org/wiki/B%C3%A9zier_curve">L'article Wikipédia sur les courbes de Bézier</a></li>
</ul>