The `CanvasRenderingContext2D``.quadraticCurveTo()` method of the Canvas 2D API adds a quadratic Bézier curve to the current sub-path. It requires two points: the first one is a control point and the second one is the end point. The starting point is the latest point in the current path, which can be changed using `moveTo()` before creating the quadratic Bézier curve.

## Syntax

``````void ctx.quadraticCurveTo(cpx, cpy, x, y);
``````

### Parameters

`cpx`
The x-axis coordinate of the control point.
`cpy`
The y-axis coordinate of the control point.
`x`
The x-axis coordinate of the end point.
`y`
The y-axis coordinate of the end point.

## Examples

This example shows how a quadratic Bézier curve is drawn.

#### HTML

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

#### JavaScript

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

ctx.beginPath();
ctx.moveTo(50, 20);
ctx.stroke();

// Start and end points
ctx.fillStyle = 'blue';
ctx.beginPath();
ctx.arc(50, 20, 5, 0, 2 * Math.PI);   // Start point
ctx.arc(50, 100, 5, 0, 2 * Math.PI);  // End point
ctx.fill();

// Control point
ctx.fillStyle = 'red';
ctx.beginPath();
ctx.arc(230, 30, 5, 0, 2 * Math.PI);
ctx.fill();
``````

#### Result

In this example, the control point is red and the start and end points are blue.

This example draws a simple quadratic Bézier curve using `quadraticCurveTo()`.

#### HTML

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

#### JavaScript

The curve begins at the point specified by `moveTo()`: (20, 110). The control point is placed at (230, 150). The curve ends at (250, 20).

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

ctx.beginPath();
ctx.moveTo(20, 110);
ctx.stroke();
``````

## Specifications

Specification Status Comment
HTML Living Standard
The definition of 'CanvasRenderingContext2D.quadraticCurveTo' in that specification.
Living Standard

## Browser compatibility

BCD tables only load in the browser