Customizing the color of a node shape with paint styles

The following properties control the way the interior of the shape is painted: fillStyle, foreground , background , fillStart , fillEnd , fillAngle , and fillTexture .

The fillStyle property specifies the type of paint object used to fill the shape. The possible values are listed in the following table.

Fill style properties

CSS Property and Values	Rendering
`fillStyle = SOLID_COLOR`
`fillStyle = LINEAR_GRADIENT`
`fillStyle = RADIAL_GRADIENT`
`fillStyle = TEXTURE`

The foreground and background properties specify the colors used:

In SOLID_COLOR mode, the shape is filled with foreground .

In LINEAR_GRADIENT and RADIAL_GRADIENT modes, the gradient starts with foreground and ends with background :

Fill color properties

CSS Properties and Values	Rendering
`fillStyle = LINEAR_GRADIENT` `foreground = blue` `background = red`
`fillStyle = RADIAL_GRADIENT` `foreground = blue` `background = red`

In LINEAR_GRADIENT and RADIAL_GRADIENT modes, the fillStart , fillEnd , and fillAngle properties define the geometry of the gradient. A gradient is defined by two points, P1 and P2. The following figures show the results of the properties.

The following figure shows the geometry of a linear gradient.

Linear gradient

Note that the linear gradient is always in reflect mode, so the colors go back and forth from foreground to background outside the (P1, P2) segment.

The following figure shows the geometry of a radial gradient.

Radial gradient

The fillTexture property specifies an image that will be used as a texture in TEXTURE mode.

Current section

Customizing user-defined network nodes