This defines the color of the sprite placeholder rectangle if no image or animations are set. By default this color is gray.

You can assign the shapeColor in a number of ways, including:

  • A string containing a named HTML color, such as "orange" or "teal". A full list of color names can be found at W3 Schools - Colors
  • A string containing a hexadecimal color, such as "#FF7700" or "#00ADBC"
  • An rgb() block


var sprite = createSprite(200,200);
sprite.shapeColor = "blue";


sprite.shapeColor = "blue";


The color of the sprite placeholder.


  • 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.
  • Sprites all have the same properties and you use the dot notation (combining the name of the sprite, followed by a dot, with the label of the property) to both access and update the property for that sprite.
  • Any changes to the properties of a sprite will not be seen until after drawSprites() is called.

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