YouTipCanvas Quadraticcurveto
## HTML Canvas quadraticCurveTo() Method
The `quadraticCurveTo()` method of the Canvas 2D API adds a quadratic Bézier curve to the current path.
A quadratic Bézier curve requires two points: a single **control point** and an **end point**. The **start point** 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 position.
---
## Syntax
```javascript
context.quadraticCurveTo(cpx, cpy, x, y);
```
### Parameter Values
| Parameter | Type | Description |
| :--- | :--- | :--- |
| `cpx` | Number | The x-coordinate of the Bézier control point. |
| `cpy` | Number | The y-coordinate of the Bézier control point. |
| `x` | Number | The x-coordinate of the end point. |
| `y` | Number | The y-coordinate of the end point. |
---
## How It Works
A quadratic Bézier curve is defined by three points:
1. **Start Point:** Defined by `moveTo(startX, startY)` (or the ending point of the previous path segment).
2. **Control Point:** Defined by `(cpx, cpy)`. This point acts like a magnet, pulling the curve toward it without the curve actually touching it.
3. **End Point:** Defined by `(x, y)`. This is where the curve ends.
```
Start Point (20, 20) ●
\
\ ● Control Point (20, 100)
\ /
\ /
● End Point (200, 20)
```
* **Tip:** If you need more complex curves, see the `bezierCurveTo()` method, which uses **two** control points instead of one.
---
## Code Examples
### Example 1: Drawing a Basic Quadratic Curve
This example demonstrates how to draw a simple quadratic Bézier curve on a canvas.
```html
```
### Example 2: Visualizing the Control Point
To better understand how the control point affects the curve, this example draws the curve along with helper lines connecting the start point, control point, and end point.
```javascript
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const start = { x: 50, y: 100 };
const control = { x: 150, y: 20 };
const end = { x: 250, y: 100 };
// Draw the helper lines (tangents)
ctx.beginPath();
ctx.strokeStyle = "#ff0000"; // Red lines
ctx.lineWidth = 1;
ctx.moveTo(start.x, start.y);
ctx.lineTo(control.x, control.y);
ctx.lineTo(end.x, end.y);
ctx.stroke();
// Draw the actual Quadratic Bézier Curve
ctx.beginPath();
ctx.strokeStyle = "#000000"; // Black curve
ctx.lineWidth = 3;
ctx.moveTo(start.x, start.y);
ctx.quadraticCurveTo(control.x, control.y, end.x, end.y);
ctx.stroke();
// Draw the points
ctx.fillStyle = "#0000ff"; // Blue dots
ctx.beginPath();
ctx.arc(start.x, start.y, 5, 0, 2 * Math.PI); // Start point
ctx.arc(control.x, control.y, 5, 0, 2 * Math.PI); // Control point
ctx.arc(end.x, end.y, 5, 0, 2 * Math.PI); // End point
ctx.fill();
```
---
## Considerations & Tips
* **Path Initialization:** Always call `beginPath()` before starting a new path. If you do not specify a starting point using `moveTo()`, the first control point `(cpx, cpy)` will be used as the starting point, resulting in a straight line instead of a curve.
* **Performance:** Bézier curves are calculated dynamically by the browser. Drawing hundreds of complex curves simultaneously in an animation loop can impact performance. Optimize by pre-rendering static curves onto an offscreen canvas when necessary.
---
## Browser Support
| Chrome | Edge/IE | Firefox | Safari | Opera |
| :---: | :---: | :---: | :---: | :---: |
| Yes | IE 9+ | Yes | Yes | Yes |
*Note: Internet Explorer 8 and earlier versions do not support the `