YouTipCanvas Beziercurveto
## HTML Canvas `bezierCurveTo()` Method
The `bezierCurveTo()` method of the Canvas 2D API adds a cubic Bézier curve to the current sub-path.
A cubic Bézier curve requires three points: two control points and a final end point. The starting point of the curve is the last point in the current path. If no path has been established, you must use the `beginPath()` and `moveTo()` methods to define the starting point before drawing the curve.
---
## Syntax
```javascript
context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
```
### Parameter Values
| Parameter | Type | Description |
| :--- | :--- | :--- |
| `cp1x` | Number | The x-coordinate of the first Bézier control point. |
| `cp1y` | Number | The y-coordinate of the first Bézier control point. |
| `cp2x` | Number | The x-coordinate of the second Bézier control point. |
| `cp2y` | Number | The y-coordinate of the second Bézier control point. |
| `x` | Number | The x-coordinate of the ending point. |
| `y` | Number | The y-coordinate of the ending point. |
---
## How It Works
A cubic Bézier curve is defined by four points:
1. **Start Point:** Defined by `moveTo(startX, startY)` (the current pen position).
2. **Control Point 1 (`cp1x`, `cp1y`):** Pulls the curve towards itself near the start.
3. **Control Point 2 (`cp2x`, `cp2y`):** Pulls the curve towards itself near the end.
4. **End Point (`x`, `y`):** The destination where the curve ends.
```
Start Point (moveTo) ───────────► Control Point 1 (cp1x, cp1y)
│
▼
End Point (x, y) ◄─────────── Control Point 2 (cp2x, cp2y)
```
*Note: If you only need a single control point for a simpler curve, use the [`quadraticCurveTo()`](canvas-quadraticcurveto.html) method instead.*
---
## Code Examples
### Example 1: Drawing a Basic Cubic Bézier Curve
This example demonstrates how to draw a simple curve using two control points.
```html
```
### Example 2: Visualizing the Control Points
To better understand how control points affect the curve, this example draws the curve along with helper lines connecting the control points to their respective start and end points.
```javascript
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const start = { x: 50, y: 200 };
const cp1 = { x: 100, y: 50 };
const cp2 = { x: 250, y: 50 };
const end = { x: 300, y: 200 };
// Draw the Bézier Curve
ctx.beginPath();
ctx.moveTo(start.x, start.y);
ctx.bezierCurveTo(cp1.x, cp1.y, cp2.x, cp2.y, end.x, end.y);
ctx.strokeStyle = "#000000";
ctx.lineWidth = 3;
ctx.stroke();
// Draw helper lines to visualize control points
ctx.lineWidth = 1;
ctx.strokeStyle = "#ff0000";
// Line from Start to Control Point 1
ctx.beginPath();
ctx.moveTo(start.x, start.y);
ctx.lineTo(cp1.x, cp1.y);
ctx.stroke();
// Line from End to Control Point 2
ctx.beginPath();
ctx.moveTo(end.x, end.y);
ctx.lineTo(cp2.x, cp2.y);
ctx.stroke();
```
---
## Browser Support
The `bezierCurveTo()` method is fully supported by all modern web browsers:
* Google Chrome
* Mozilla Firefox
* Microsoft Edge / Internet Explorer 9+
* Safari
* Opera
*Note: Internet Explorer 8 and earlier versions do not support the `