fill()

Sets the color used to fill shapes.

The fill color controls the interior color of shapes drawn - arc(), ellipse(), rect(), regularPolygon(), shape(). The outline color is set using stroke(). Until you change the fill, Game Lab will continue to draw with the color that you set.

The color parameter can take one of two forms. It can be:

• The lowercase name of a color inside " ". A full list of color names can be found at W3 Schools - Colors
• A call to the rgb() command.

The default fill color is gray.

Examples

Four Color Bullseye

Draw a square bullseye using four colors from an array.

// Draw a square bullseye using four colors from an array.
var colors = ["red", "magenta", "pink", "purple"];
for (var i = 0; i < 10; i++) {
  fill(colors[i%4]); // Choose a color from the array.
  rect(100+10*i, 100+10*i, 200-20*i, 200-20*i);
}

                            // Use the draw() function to animate a circle through 
// multiple shades of red.
var number = 0;
var count = 0;
function draw() {
  background("white");
  fill(rgb(number, 0, 0));
  ellipse(200, 200, 100, 100);
  count=count+5;
  if (count<=255) {
      number=number+5;
  }
  else if (count<=510){
    number=number-5;
  }
  else if (count>510) {
    count=0;
  }
}
                        

// Sets the fill color to cyan.
fill("cyan");
rect(100, 100, 200, 200);

2 Ways

Demonstrate the two ways to specify the color parameter.

// Demonstrate the two ways to specify the color parameter.
// Sets the color using the name of a color in a string.
fill("chartreuse");
ellipse(100, 100, 100, 100);

// Sets the color using a call to color with an rgba value.
// The last value is the amount of transparency, a number from 0 to 1.
fill(rgb(127, 255, 0, 0.5));
rect(100, 100, 200, 200);

Syntax

fill(color)

Returns

No return value. Changes future output to the display only.

Tips

• The default stroke is black, the default stroke weight is 1 pixel, and the default fill is gray. Change the width of the line and color of the line used to draw all subsequent shapes using strokeWeight() and stroke().
• A full list of color names can be found at W3 Schools - Colors.
• For more specific color selection, or to randomize color selection, use rgb() as a parameter to fill instead of a color name.

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