The CanvasRenderingContext2D.ellipse()
method of the Canvas 2D API adds an elliptical arc to the current sub-path.
The CanvasRenderingContext2D.ellipse()
method of the Canvas 2D API adds an elliptical arc to the current sub-path.
js
ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle) 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).
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 eccentric angle at which the ellipse starts, measured clockwise from the positive x-axis and expressed in radians.
endAngle
The eccentric 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 is false
(clockwise).
None (undefined
).
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>
js
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();
This example creates three elliptical paths with varying properties.
html
<canvas id="canvas"></canvas>
js
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();
Specification |
---|
HTML Standard # dom-context-2d-ellipse-dev |
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
ellipse |
31 | 13 | 48 | No | 18 | 9 | 4.4.3 | 31 | 48 | 18 | 9 | 2.0 |
CanvasRenderingContext2D
CanvasRenderingContext2D.arc()
to draw a circular arc
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/ellipse