Learn

The next shapes that we’ll look at are some of the most popular shapes in modern architecture—ellipses and circles!

The ellipse() function is similar to the rect() function in requiring four parameters when called. The first and second parameters are the x and y location of where the ellipse is drawn to, but instead of the corner, ellipses are positioned by their center! The third parameter sets the width or the diameter along the x-axis of the canvas, and the fourth parameter is the diameter along the y-axis.

Diagram of ellipse

A circle is a special case of ellipse where the height is equal to the width of the circle. The circle() function has three parameters: the x and y coordinates for the center, and the width, or the diameter of the circle.

Diagram of circle

The way that the parameters for the circle() and ellipse() functions are interpreted can also be changed with the ellipseMode() function, which will be covered in detail in the Grouping and Transforming Shapes lesson.

Instructions

1.

Use the ellipse() function to draw an ellipse to the sketch with the center position at (150, 200) and the width of 150 pixels, and the height of 100 pixels.

2.

Next to the ellipse that you just drew, draw a circle with a width of 75px and positioned at (300, 150).

Take this course for free

By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.
Already have an account?