# CanvasRenderingContext2D.ellipse()

The `CanvasRenderingContext2D``.ellipse()` method of the Canvas 2D API adds an elliptical arc to the current sub-path.

## Syntax

```void ctx.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle [, anticlockwise]);
```

The `ellipse()` method creates an elliptical arc centered at `(x, y)` with the radii `radiusX` and `radiusY`. The path starts at `startAngle` and ends at `endAngle`, and travels in the direction given by `anticlockwise` (defaulting to clockwise).

### Parameters

`x`
The x-axis (horizontal) coordinate of the ellipse's center.
`y`
The y-axis (vertical) coordinate of the ellipse's center.
`radiusX`
The ellipse's major-axis radius. Must be non-negative.
`radiusY`
The ellipse's minor-axis radius. Must be non-negative.
`rotation`
The rotation of the ellipse, expressed in radians.
`startAngle`
The angle at which the ellipse starts, measured clockwise from the positive x-axis and expressed in radians.
`endAngle`
The angle at which the ellipse ends, measured clockwise from the positive x-axis and expressed in radians.
`anticlockwise` Optional
An optional `Boolean` which, if `true`, draws the ellipse anticlockwise (counter-clockwise). The default value is `false` (clockwise).

## Examples

### Drawing a full ellipse

This example draws an ellipse at an angle of π/4 radians (45°). To make a full ellipse, the arc begins at an angle of 0 radians (0°), and ends at an angle of 2π radians (360°).

#### HTML

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

#### JavaScript

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

// Draw the ellipse
ctx.beginPath();
ctx.ellipse(100, 100, 50, 75, Math.PI / 4, 0, 2 * Math.PI);
ctx.stroke();

// Draw the ellipse's line of reflection
ctx.beginPath();
ctx.setLineDash([5, 5]);
ctx.moveTo(0, 200);
ctx.lineTo(200, 0);
ctx.stroke();
```

### Various elliptical arcs

This example creates three elliptical paths with varying properties.

#### HTML

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

#### JavaScript

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

ctx.fillStyle = 'red';
ctx.beginPath();
ctx.ellipse(60, 75, 50, 30, Math.PI * .25, 0, Math.PI * 1.5);
ctx.fill();

ctx.fillStyle = 'blue';
ctx.beginPath();
ctx.ellipse(150, 75, 50, 30, Math.PI * .25, 0, Math.PI);
ctx.fill();

ctx.fillStyle = 'green';
ctx.beginPath();
ctx.ellipse(240, 75, 50, 30, Math.PI * .25, 0, Math.PI, true);
ctx.fill();
```

## Specifications

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

## Browser compatibility

Update compatibility data on GitHub
Desktop Mobile Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Chrome Full support 31 Edge Full support 13 Firefox Full support 48 IE No support No Opera Full support 18 Safari Full support 9 WebView Android Full support 4.4.3 Chrome Android Full support 31 Firefox Android Full support 48 Opera Android Full support 18 Safari iOS Full support 9 Samsung Internet Android Full support 2.0

### Legend

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.