Canvas is a HTML5 element used for drawing graphics via JavaScript. When working with canvas, you specify colors using RGB, RGBA, HSL, or hexadecimal color values. These color codes allow you to set the red, green, blue, and alpha (transparency) components to create millions of possible color combinations.
RGB Color Codes
The RGB color model uses the red, green, and blue components to create colors. Each component is specified on a scale from 0 to 255, where 0 means none of that color and 255 means full intensity. By mixing different amounts of red, green, and blue you can generate any color within the RGB gamut.
Here is the syntax for an RGB color value:
rgb(red, green, blue)
For example:
rgb(255, 0, 0) - pure red rgb(0, 255, 0) - pure green rgb(0, 0, 255) - pure blue rgb(255, 255, 0) - yellow rgb(255, 0, 255) - magenta
By combining all three components you get white, while 0,0,0 gives black.
RGBA Color Codes
RGBA colors work just like RGB, but with the addition of an alpha channel to control opacity. The alpha value is specified as a decimal number from 0 to 1, where 0 is fully transparent and 1 is fully opaque.
Here is the syntax for an RGBA color value:
rgba(red, green, blue, alpha)
For example:
rgba(255, 0, 0, 1) - solid red rgba(0, 255, 0, 0.5) - semi-transparent green rgba(0, 0, 255, 0.25) - faint blue
The RGBA alpha channel is useful for creating transparent overlays and other effects on the canvas.
HSL Color Codes
HSL stands for hue, saturation, and lightness. It represents colors using more natural color wheel model rather than RGB’s cube model. The hue value ranges from 0 to 360 and represents an angle on the color wheel. Saturation describes the intensity of a hue from 0% to 100%. Lightness sets the balance of light and dark from 0% to 100%.
Here is the syntax for an HSL color value:
hsl(hue, saturation, lightness)
For example:
hsl(0, 100%, 50%) - red hsl(120, 100%, 50%) - green hsl(240, 100%, 50%) - blue hsl(60, 100%, 50%) - yellow hsl(300, 100%, 50%) - magenta
HSL can be more intuitive to use than RGB or hex codes, especially when adjusting color brightness/lightness.
Hexadecimal Color Codes
Hexadecimal or hex color codes represent RGB values in a string of 6 hexadecimal characters. Each pair of characters codes for one color channel. For example:
#FF0000 - red #00FF00 - green #0000FF - blue
With hex codes, the pair order is always #RRGGBB from left to right. Each hexadecimal character has a value from 0 to F which translates to the 0 to 255 decimal values for each RGB color channel. Some examples:
0 - black F - maximum value (255 decimal) 8 - medium value (128 decimal)
Hex values are commonly used for web colors since they are compact and easy to read/type. The leading # is optional when specifying hex colors in code.
Canvas Fill and Stroke Colors
For canvas drawing operations like rectangles, text, paths, etc. you can set a fill color and stroke color. The fill is the interior of the shape while the stroke is the outline. You can use any of the RGB, RGBA, HSL, or hex color formats.
For example:
// Set fill color ctx.fillStyle = '#FF0000'; // Set stroke color ctx.strokeStyle = 'rgba(0,0,255,0.5)';
That will set the fill to solid red and the stroke to a 50% opaque blue.
Canvas Gradients
In addition to solid colors, you can also use color gradients for fills and strokes on canvas. There are two types of gradients:
- Linear gradient – blends between two or more colors along a line
- Radial gradient – blends between colors radiating from a point
To create a gradient, you first define a CanvasGradient object. For a linear gradient you pass the start and end positions. For a radial gradient you pass the start position and radius.
You then add color stops to the gradient by calling its addColorStop() method. Each stop is defined by an offset between 0 and 1 and a color.
Here is an example linear gradient from red to blue:
// Create canvas gradient var grd = ctx.createLinearGradient(0, 0, canvas.width, 0); // Add color stops grd.addColorStop(0, 'red'); grd.addColorStop(1, 'blue'); // Set as fill style ctx.fillStyle = grd;
And a radial gradient example:
// Create radial gradient var grd = ctx.createRadialGradient(canvas.width/2, canvas.height/2, 0, canvas.width/2, canvas.height/2, canvas.width/2); // Add color stops grd.addColorStop(0, 'red'); grd.addColorStop(1, 'blue'); // Set as fill style ctx.fillStyle = grd;
Gradients allow you to create nice color blended backgrounds and effects on canvas.
Canvas Patterns
In addition to solid colors and gradients, you can also fill and stroke shapes on canvas using pattern fills. To create a pattern, you first create or load an image via the CanvasPattern constructor. You then set the pattern fill like:
// Create pattern var img = new Image(); img.src = 'image.png'; var ptrn = ctx.createPattern(img, 'repeat'); // Set as fill style ctx.fillStyle = ptrn;
This will tile the image.png image when filling shapes. You can also set the pattern repeat mode to ‘repeat-x’, ‘repeat-y’, or ‘no-repeat’. Patterns allow you to achieve all sorts of interesting graphical effects.
Canvas Shadows
Using shadows is a good way to add depth and perspective to canvas drawings. To add a shadow, you first configure the shadow parameters:
// Shadow settings ctx.shadowOffsetX = 2; ctx.shadowOffsetY = 2; ctx.shadowBlur = 2; ctx.shadowColor = 'rgba(0,0,0,0.5)';
This sets a 2 pixel offset in X and Y direction, a 2 pixel blur amount, and a 50% opaque black shadow color. Once configured, any shapes drawn will have the shadow applied.
You can adjust the offsets and blur to control the shadow spread. And the alpha channel of the shadowColor allows you to create softer transparent shadows.
Conclusion
Canvas provides a lot of options for coloring shapes and text. The main color formats are RGB, RGBA, HSL, and hex codes which allow millions of color combinations. You can use solid colors, gradients, and patterns as fill and stroke styles.
Effects like shadows also help add flair to your canvas drawings. Mastering canvas colors and styles will help you create vibrant, attractive graphics and visualizations.