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

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

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