Canvas context: colors

In previous examples, we saw how to set the current color using the strokeStyle and fillStyle properties of the canvas context object.

Let's look at color in a little more detail, and see how we can use gradients or patterns/textures/images (in other words: fill shapes or fill the outline of the shapes with some images that repeat themselves).

Colors and transparency

You can use the same syntax for colors that is supported by CSS3. The next lines show possible values/syntaxes.

ctx.strokeStyle = 'red';

ctx.fillStyle = "#00ff00";

ctx.strokeStyle = "rgb(0, 0, 255)";

ctx.fillStyle = "rgba(0, 0, 255, 0.5)";

Note that:

• All values are strings;

• Line 4 defines a "transparent color", the "a" of "rgba" means "alpha channel". Its value is between 0 and 1, where 0 means "completely transparent" and 1 means "opaque".

Here is an example that shows how to draw different filled rectangles in blue, with different levels of transparency: