## With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

No credit card required

# 4.6. Drawing an Ellipse

## Problem

You want to draw an ellipse (oval) at runtime.

## Solution

Create a custom `MovieClip.drawEllipse( )` method using the Drawing API and invoke it on a movie clip.

## Discussion

You can create a method of the `MovieClip` class to draw an ellipse that is very similar to the ```drawCircle( )``` method in Recipe 4.5. In fact, the `drawCircle( )` method is merely a degenerate version of ```drawEllipse( )```, in which the radii in the x and y directions are the same.

The custom `drawEllipse( )` method accepts four parameters:

`xRadius`

The radius of the ellipse in the x direction (major axis).

`yRadius`

The radius of the ellipse in the y direction (minor axis).

`x`

The x coordinate of the center of the ellipse.

`y`

The y coordinate of the center of the ellipse.

Refer to Recipe 4.5 for those aspects of the `drawEllipse( )` method that are not commented on here.

```MovieClip.prototype.drawEllipse = function (xRadius, yRadius, x, y) {
var angleDelta = Math.PI / 4;

// While the circle has only one distance to the control point for each segment,
// the ellipse has two distances: one that corresponds to `xRadius` and another that
// corresponds to `yRadius`.
var rx, ry, ax, ay;
for (var i = 0; i < 8; i++) {
angle += angleDelta;
rx = x + Math.cos(angle-(angleDelta/2))*(xCtrlDist);
ry = y + Math.sin(angle-(angleDelta/2))*(yCtrlDist);
this.curveTo(rx, ry, ax, ay);
}
}```

Once you have defined and included the ```drawEllipse( )``` method in your Flash document, you can draw an ellipse rather easily. Use the `drawEllipse( )` method the same way you used the `drawCircle( )` method in Recipe 4.5 but provide both x and y radii instead of just a single radius. Remember that you still need to define the line style before you call the ```drawEllipse( )``` method.

```// Create an ellipse with minor and major axes of 100 and 200, respectively.
this.createEmptyMovieClip("ellipse", 1);
ellipse.lineStyle(1, 0x000000, 100);    // Use a one-pixel, black, solid border
ellipse.drawEllipse(100, 200);```

Having defined `drawEllipse( )`, we can rewrite the `drawCircle( )` method, as follows:

```MovieClip.prototype.drawCircle = function (radius, x, y) {
// Call `drawEllipse(  )` with the same radius for both x and y.