An example of the HTML5 canvas ellipse function

• Introduction
• Browser support
• An example
• 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 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's 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 a method of using the bezierCurveTo() function to achieve a "pseudo-ellipse".

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:

1. x - The X coordinate
2. y - The Y coordinate
3. rx - The X radius of the ellipse
4. ry - The Y radius of the ellipse
5. rotation - How much the ellipse is rotated
6. start - The start angle*
7. end - The end angle*
8. anticlockwise - Whether the ellipse is drawn clockwise (false) or anti-clockwise (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             = 15
    var y             = 15
    var rx            = 20
    var ry            = 10
    var rotation      = 0;
    var start         = 0;
    var end           = 2 * Math.PI;
    var anticlockwise = false
    
    context.ellipse(x, y, rx, ry, rotation, start, end, anticlockwise);

context.stroke() ;

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>

How can I get ellipses now?

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 mimicks 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>

© Copyright RGraph licensing 2008-2013 All rights reserved. Privacy policy, Terms and conditions