Game Lab Documentation: fill()

Category:Drawing

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

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);

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

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);
}

Seeing Red

Use the draw() function to animate a circle through multiple shades of red.

// 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;
  }
}

Syntax

fill(color)

Parameters

NameTypeRequired?Description
color String The color used to fill shapes or a call to the rgb() command.

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