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

Syntax

ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle)ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, counterclockwise)

Theellipse() method creates an elliptical arc centered at(x, y) with the radiiradiusX andradiusY. Thepath starts atstartAngle and ends atendAngle, and travels inthe direction given bycounterclockwise (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

Theeccentric angle at which the ellipse starts, measured clockwise from the positive x-axisand expressed in radians.

endAngle

Theeccentric angle at which the ellipse ends, measured clockwise from the positive x-axis andexpressed in radians.

counterclockwiseOptional

An optional boolean value which, iftrue, draws the ellipsecounterclockwise (anticlockwise). The default value isfalse(clockwise).

Return value

None (undefined).

Examples

Drawing a full ellipse

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

HTML

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

JavaScript

const canvas = document.getElementById("canvas");const ctx = canvas.getContext("2d");// Draw the ellipsectx.beginPath();ctx.ellipse(100, 100, 50, 75, Math.PI / 4, 0, 2 * Math.PI);ctx.stroke();// Draw the ellipse's line of reflectionctx.beginPath();ctx.setLineDash([5, 5]);ctx.moveTo(0, 200);ctx.lineTo(200, 0);ctx.stroke();

Result

Various elliptical arcs

This example creates three elliptical paths with varying properties.

HTML

<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 * 0.25, 0, Math.PI * 1.5);ctx.fill();ctx.fillStyle = "blue";ctx.beginPath();ctx.ellipse(150, 75, 50, 30, Math.PI * 0.25, 0, Math.PI);ctx.fill();ctx.fillStyle = "green";ctx.beginPath();ctx.ellipse(240, 75, 50, 30, Math.PI * 0.25, 0, Math.PI, true);ctx.fill();

Result

Specifications

Browser compatibility

See also

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