- HTML Canvas Tutorial
- HTML Canvas - Home
- HTML Canvas - Introduction
- Environmental Setup
- HTML Canvas - First Application
- HTML Canvas - Drawing 2D Shapes
- HTML Canvas - Path Elements
- 2D Shapes Using Path Elements
- HTML Canvas - Colors
- HTML Canvas - Adding Styles
- HTML Canvas - Adding Text
- HTML Canvas - Adding Images
- HTML Canvas - Canvas Clock
- HTML Canvas - Transformations
- Composting and Clipping
- HTML Canvas - Basic Animations
- Advanced Animations
- HTML Canvas API Functions
- HTML Canvas - Element
- HTML Canvas - Rectangles
- HTML Canvas - Lines
- HTML Canvas - Paths
- HTML Canvas - Text
- HTML Canvas - Colors and Styles
- HTML Canvas - Images
- HTML Canvas - Shadows and Transformations
- HTML Canvas Useful Resources
- HTML Canvas - Quick Guide
- HTML Canvas - Useful Resources
- HTML Canvas - Discussion
HTML Canvas - ellipse() Method
The HTML Canvas ellipse() method is used to draw elliptical arcs to the available path for the context object of CanvasRenderingContext2D interface.
This method creates an elliptical arc having center (x,y) with the radii x_radius and y_radius, respectively. The path is drawn from start_angle and ends at end_angle with the direction given as last parameter.
Syntax
Following is the syntax of HTML Canvas ellipse() method −
CanvasRenderingContext2D.ellipse(x, y, x_radius, y_radius, rotation, start_angle, end_angle, direction);
Parameters
Following is the list of parameters of this method −
S.No | Parameter & Description | |
---|---|---|
1 | x
The x co-ordinate of the center of ellipse. | |
2 | y
The y co-ordinate of the center of ellipse. |
|
3 | x_radius
The radius of ellipse's major axis. The value must be positive. |
|
4 | y_radius
The radius of ellipse's minor axis. The value must be positive. |
|
5 | rotation
The rotation angle of ellipse in radians. |
|
6 | start_angle
The starting angle of ellipse from positive X-axis. |
|
7 | end_angle
The ending angle of ellipse from Y-axis and is measured in radians. |
|
8 | direction
The direction in which ellipse is drawn. It takes Boolean values and when true is given, ellipse is drawn anti-clockwise. When false is given the ellipse is drawn clockwise. The ellipse is drawn clockwise by default. |
Return value
This method when applied to the CanvasRenderingContext2D interface context object draws an ellipse inside the Canvas element.
Example
The following example draws an ellipse inside the Canvas element using HTML Canvas ellipse() method. The implementation code is given below.
<!DOCTYPE html> <html lang="en"> <head> <title>Reference API</title> <style> body { margin: 10px; padding: 10px; } </style> </head> <body onload="Context();"> <canvas id="canvas" width="200" height="200" style="border: 1px solid black;"></canvas> <script> function Context() { var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); context.beginPath(); context.ellipse(90, 90, 30, 50, Math.PI / 3, 0, 2 * Math.PI) context.stroke(); } </script> </body> </html>
Output
The output returned by the above code on the webpage as −
Example
The following example draws a line divides the ellipse into two inside the Canvas element. The implementation code is given below.
<!DOCTYPE html> <html lang="en"> <head> <title>Reference API</title> <style> body { margin: 10px; padding: 10px; } </style> </head> <body onload="Context();"> <canvas id="canvas" width="270" height="250" style="border: 1px solid black;"></canvas> <script> function Context() { var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); context.beginPath(); context.ellipse(120, 120, 70, 50, 0, 0, 2 * Math.PI); context.stroke(); context.beginPath(); context.moveTo(25, 125); context.lineTo(225, 125); context.stroke() context.closePath(); } </script> </body> </html>
Output
The output returned by the above code on the webpage as −
Example
The following example draws an ellipse by combining two semi ellipses inside the Canvas element. The implementation code is given below.
<!DOCTYPE html> <html lang="en"> <head> <title>Reference API</title> <style> body { margin: 10px; padding: 10px; } </style> </head> <body onload="Context();"> <canvas id="canvas" width="400" height="200" style="border: 1px solid black;"></canvas> <script> function Context() { var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); // vertical ellipse context.beginPath(); context.fillStyle = 'orange'; context.ellipse(100, 100, 30, 50, 0, 0, Math.PI); context.fill(); context.closePath(); context.beginPath(); context.fillStyle = 'green'; context.ellipse(100, 100, 30, 50, 0, 0, Math.PI, true); context.fill(); context.closePath(); // horizantal ellipse context.beginPath(); context.fillStyle = 'blue'; context.ellipse(300, 100, 50, 30, 0, 0, Math.PI); context.fill(); context.closePath(); context.beginPath(); context.fillStyle = 'purple'; context.ellipse(300, 100, 50, 30, 0, 0, Math.PI, true); context.fill(); context.closePath(); } </script> </body> </html>
Output
The output returned by the above code on the webpage as −
Example
The following example draws semi inside the Canvas element. The implementation code is given below.
<!DOCTYPE html> <html lang="en"> <head> <title>Reference API</title> <style> body { margin: 10px; padding: 10px; } </style> </head> <body onload="Context();"> <canvas id="canvas" width="400" height="200" style="border: 1px solid black;"></canvas> <script> function Context() { var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); context.beginPath(); context.fillStyle = 'rgb(229,203,122)'; context.ellipse(100, 100, 70, 50, Math.PI / 4, 0, Math.PI); context.fill(); context.closePath(); context.beginPath(); context.fillStyle = 'rgb(69,1,1)'; context.ellipse(200, 90, 70, 50, Math.PI / 4, 0, 2 * Math.PI); context.fill(); context.closePath(); context.beginPath(); context.fillStyle = 'rgb(229,203,122)'; context.ellipse(300, 70, 70, 50, Math.PI / 4, 0, Math.PI, true); context.fill(); context.closePath(); } </script> </body> </html>
Output
The output returned by the above code on the webpage as −
To Continue Learning Please Login
Login with Google