2a. Colors

Valid color formats

Many canvas rendering functions take color arguments, which can be one of three different types:

• A string representing a CSS color value
• A CanvasGradient
• A CanvasPattern

By far the most common of these are CSS color values, which can be written either in hex (e.g. "#FFFF00"), in functional notation (e.g. "rgb(255, 255, 0)") or simply by color name (e.g. "White").

Color objects

Normal color strings can be hard to work with if the exact color is not known, so BETA.js also provides color objects which can be used instead of normal CSS color strings.

Because a color object automatically converts to a CSS color string, it can be passed directly as a color argument.

A color object is created by any of the color functions described in 2b. Colors - functions. A color object contains color in RGBA format, and has four data properties:

r, g and b are integers in the range [0, 255], and represent the red, green and blue color channels respectively.
a is a number in the range [0, 1] and represents the alpha channel.

All color objects also inherit a toString function property, which causes them to convert nicely to strings in CSS rgba() notation when needed.

var color = BETA.rgba(150, 75, 0, 0.75);
var string = color.toString(); // "rgba(150, 75, 0, 0.75)"