Web/API/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 StandardThe definition of 'CanvasRenderingContext2D.ellipse' in that specification.	Living Standard

Browser compatibility

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

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	Safari on iOS	Samsung Internet
ellipse Experimental'	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.

See also

• The interface defining this method: CanvasRenderingContext2D
• Use CanvasRenderingContext2D.arc() to draw a circular arc

CanvasRenderingContext2D.ellipse() by Mozilla Contributors is licensed under CC-BY-SA 2.5.