Skip to main content
  1. Index

GoJS Brushes

A Brush holds color information and describes how to draw the inside of a Shape or the stroke of a shape or a TextBlock or the background of any GraphObject.

A Brush must not be modified once it has been assigned to a GraphObject, such as the Shape.fill or TextBlock.stroke or GraphObject.background. However, a Brush may be shared by multiple GraphObjects.

Solid Brushes

The simplest brushes are defined by a single solid color. Because they are so simple, anywhere you want a single-color brush you can substitute a valid CSS color string.

Many CSS color strings are valid, including named colors, hex values, RGB values, and RGBA values.

Gradient Brushes

Gradient brushes are defined by setting the type and adding a number of color stops to the Brush.

js

To simplify the syntax, you can use the constructor's initialization argument:

js

Some examples follow:

Brushes can have any number of color stops:

Radial gradient brushes can be controlled with Brush.startRadius and Brush.endRadius, which default to zero and NaN, respectively, meaning the gradient begins at the very center and goes to the farthest measured edge of the object.

Several GraphObjects can share the same Brush:

Pattern Brushes

The following example sets up two Pattern brushes, one using an HTML Canvas with content drawn to it, which looks like this:

The other Pattern Brush uses this image:

Try resizing the nodes below. As the size of the node changes, the pattern is used to tile its area.

Brush functions

There are some functions available for generating different colors or modifying Brush colors:

  • Brush.randomColor - returns a random hexadecimal color value
  • Brush.lightenBy and Brush.darkenBy - return lightened or darkened colors/brushes; there are both instance methods and static functions
  • Brush.lighten and Brush.darken - convenience static functions which return lightened or darkened colors
  • Brush.mix - mixes two colors together
  • Brush.isDark - determines whether a color is dark, often used in bindings; there are both instance methods and static functions

In the following example, the lighten and darken functions are used on the stroke and fill of each node.

In the following example, the color of text is determined by whether the background shape is dark.