Colour notation

The context API calls that have a colour as a parameter accept colours as a string in two different forms, one of which specifies the red, green, blue and alpha components, and other just the red, green and blue, assgned the resulting colour an alpha value of 1.0.

#rrggbb

• Creates a colour with an alpha component of 1.0, making it completely opaque.
• rr, gg and bb are the red, green and blue components respectively, specified as a two digit hexadecimal values.
• Invalid values will return the default value of black.

rgba (red, green, blue, alpha)

• Creates a colour with a specified alpha component.
• red, green and blue must be in the range of 0 to 255.
• alpha is the alpha component for the colour, expressed as a value in the range of 0.0 (transparent) to 1.0 (opaque).
• Invalid values will return the default value of black.

var cnv = document.getElementById('canvas');
var ctx = cnv.getContext('2d');
ctx.width = ctx.width; // Clear the context

// A blue and red rectangle demonstrating the #rrggbb format.
ctx.fillStyle = "#FF0000";
ctx.fillRect(20, 20, 80, 60);
ctx.fillStyle = "#0000FF";
ctx.fillRect(40, 40, 80, 60);

// A blue rectangle demonstrating the rgba format, where the
// a component is used to set transparancy, in this case, 
// setting the blue rectangle to 50% transparent.
ctx.fillStyle = "rgba(255, 0, 0, 1)";
ctx.fillRect(180, 20, 80, 60);
ctx.fillStyle = "rgba(0, 0, 255, 0.5)";
ctx.fillRect(200, 40, 80, 60);

Standard CSS colours

Below is table listing the standard CSS colours, including the unofficial name which should not be used when specifying a colour.