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, iftrue
, draws the ellipse anticlockwise (counter-clockwise). The default value isfalse
(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();
Result
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();
Result
Specifications
Specification | Status | Comment |
---|---|---|
HTML Living Standard The 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.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
ellipse | 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