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 [, counterclockwise]);
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 counterclockwise
(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.
counterclockwise
Optional-
An optional boolean value which, if
true
, draws the ellipse counterclockwise (anticlockwise). 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 |
---|
HTML Standard # dom-context-2d-ellipse-dev |
Browser compatibility
BCD tables only load in the browser
See also
- The interface defining this method:
CanvasRenderingContext2D
- Use
CanvasRenderingContext2D.arc()
to draw a circular arc