ellipse()

Category:Drawing

Draws an ellipse onto the display centered at x and y and inscribed in a rectangle with sides length w(idth) and h(eight).

You can draw many things with the commands in the Drawing drawer of your Game Lab toolbox. For ellipse(), the x and y coordinates specify the center of the ellipse, relative to the top-left corner of the display area (x:0 y:0). The width and height of the rectangle that the ellipse is inscribed in are measured in pixels. Ellipses are drawn using the current stroke weight and current stroke color, and then filled with the current fill color (unless noStroke() or noFill() commands have been run).

Examples

Two Ellipses

Draw two ellipses at the same location but with different stroke widths and no fill color.

// Draw two ellipses at the same location but with different stroke widths and no fill color.
strokeWeight(40);
stroke("lightblue");
noFill();
ellipse(200, 200, 100, 200);
strokeWeight(1);
stroke("black");
ellipse(200, 200, 200, 100);

Quarter of an Ellipse

Change the thickness of a ellipse outline, filled in green, drawn in the upper left corner of the display.

// Change the thickness of a ellipse outline, filled in green, drawn in the upper left corner of the display.
strokeWeight(20);
fill("green");
ellipse(0, 0, 200 ,100);

Animated Ellipse

Use the draw() function to animate an oscillating ellipse.

                            // Use the draw() function to animate an oscillating ellipse.
var number = 0;
var count=0;
function draw() {
  background("white");
  ellipse(200, 200, 100-number, 100+number);
  count=count+1;
  if (count<=100) {
      number=number+1;
  }
  else if (count<=200){
    number=number-1;
  }
  else if (count>200) {
    count=0;
  }
}

// Draw a 100x100 pixel ellipse (circle) in the center of the display.
ellipse(200, 200, 100, 100);

Red Line

Change the color of the ellipse outline drawn in the center of the display.

// Change the color of the ellipse outline drawn in the center of the display.
stroke("red");
ellipse(160, 240, 100 ,200);

Syntax

ellipse(x, y, w, h)

Parameters

Name	Type	Description
x	Number	The x-location in pixels of the center of the ellipse, from left to right on the display. Should be a number from 0 to 400, but negative numbers will center the ellipse to the left of the display and numbers greater than 400 will center the ellipse to the right of the display (possibly unseen).
y	Number	The y-location in pixels of the center of the ellipse, from top to bottom on the display. Should be a number from 0 to 400, but negative numbers will center the ellipse above the display and numbers greater than 400 will center the ellipse below the display (possibly unseen).
w	Number	The horizontal width in pixels of the ellipse. Should be a positive number, but negative numbers will draw the same ellipse as positive.
h	Number	The vertical height in pixels of the ellipse. Should be a positive number, but negative numbers will draw the same ellipse as positive.

Returns

No return value. Outputs to the display only.

Tips

If you're having trouble getting an ellipse to show up, make sure that noFill() or noStroke() haven't been called, and where you're trying to draw the ellipse fits within the coordinates of the display (400 x 400).
Anything you draw will overlap previous things you drew. The sequence of drawing statements is usually important.
The default stroke is black, the default stroke weight is 1 pixel, and the default fill is gray. Change the width of the line, color of the line, and fill color used to draw all subsequent shapes using strokeWeight(), stroke(), and fill().
When drawing thick lines, the width and length of the ellipse is relative to the center of the perimeter line. The outside perimeter of the ellipse will be one half the stroke weight larger all around.

Found a bug in the documentation? Let us know at documentation@code.org