# An example of the canvas ellipse() function

*Written by Richard Heyes, on 23rd January 2013*

This page shows you an example of the canvas ellipse() function and an alternative to it if it's not available

**Warning:**As of March 2014 the features described on this page have limited browser support - currently only Google Chrome and Opera have working implementations of the

`ellipse()`

function.
**An example of the**

`ellipse()`

function- Introduction
- Browser support
- An example
**An interactive example of the ellipse() function**- How can I get ellipses now?

## Introduction

One of the new additions in the canvas v5 API is the `ellipse()`

function.
This is similar to the `arc()`

function which can
be used to draw arcs or circles. It takes more arguments than the `arc()`

function - in order for you to be able to give the vertical
and horizontal radius and also the orientation of the ellipse - but
other than that it will work in much the same way.
In total it takes eight arguments which are listed below. As with the
arc function it's important to remember that
the angles are measured in radians - not degrees. There are two functions
shown below which you can use to convert to and from
radians and degrees.

## Browser support

At the time of writing (23rd January 2013) there are no browsers
that have implemented the `ellipse()`

function.
See below however for up-to-date listings of browsers that do now
support the `ellipse()`

function and a method of using the
`bezierCurveTo()`

function to achieve a "pseudo-ellipse".

**Yes**

**No**

**No**

**No**

**Yes**

## An example

This is an example of how the `ellipse()`

function will look. It's similar
to the arc method so if you're comfortable
with that then you shouldn't have any problems. It takes extra
arguments - namely two radius arguments and a rotation
argument (ie so you can have the longer bit of the ellipse at any angle).
The arguments are:

*x - The X coordinate**y - The Y coordinate**rx - The X radius of the ellipse**ry - The Y radius of the ellipse**rotation - How much the ellipse is rotated**start - The start angle***end - The end angle***anticlockwise - Whether the ellipse is drawn clockwise (false) or anticlockwise (true)***

* Angles are measured in radians - 1 degree = (Pi / 180) - there's a few functions to convert degrees to radians and back below

** If you're drawing a full ellipse the direction is less important. But if you're only drawing part of the ellipse it is!

context.beginPath() ; var x = 150; // The X coordinate var y = 75; // The Y cooordinate var rx = 125; // The X radius var ry = 50; // The Y radius var rotation = 0; // The rotation of the ellipse (in radians) var start = 0; // The start angle (in radians) var end = 2 * Math.PI; // The end angle (in radians) var anticlockwise = false; // Whether the ellipse is drawn in a clockwise direction or // anticlockwise direction context.ellipse(x, y, rx, ry, rotation, start, end, anticlockwise); context.stroke() ;

This code creates the ellipse that is shown at the top of the page.

Here are the functions to convert degrees to radians and back again. They
are added to the `Number`

object so that you can
use them as the examples show.

<script> Number.prototype.toRadians = function () { return this * (Math.PI / 180); } Number.prototype.toDegrees = function () { return this * (180 / Math.PI); } num = 360; // 6.28 radians alert(num.toRadians()); num = Math.PI / 2; // 90 degrees alert(num.toDegrees()); </script>

## An interactive example of the ellipse() function

As of 2nd September 2013 the `ellipse()`

function has been added to the
Google Chrome Canary version. So if you're
running this or a later version that has support for the `ellipse()`

function you can have a play with
**this interactive ellipse example**
.

## How can I get ellipses without the ellipse() function?

If you're hankering after the `ellipse()`

function there is a
limited way in which you can get ellipses right now by
using the `bezierCurveTo()`

function. It involves drawing two bezier
curves - the top and the bottom of the ellipse.
An example of this method is shown. This could be wrapped into a
function that mimics the native API function that's
coming - or it could just be added to a regular function to make it
easier to use repeatedly.

<script> context = document.getElementById("cvs").getContext('2d'); context.beginPath(); context.lineWidth = 1; context.strokeStyle = 'black'; context.fillStyle = 'red'; // The start point - the center/left of the ellipse context.moveTo(10,50); // Draw the top half - a bezier curve to the center right of the ellipse context.bezierCurveTo(10,10,240,10,240,50); // Draw the bottom half - a bezier curve back to the center left of the ellipse context.bezierCurveTo(240,90,10,90,10,50); context.stroke(); context.fill(); // This adds the text to the center of the ellipse context.fillStyle = 'black'; context.font = '20pt Arial'; context.textAlign = 'center'; context.textBaseline = 'middle'; context.fillText('An ellipse!',125,50); </script>