Fill and stroke styles

Set and get the fill style

When a path is filled, all of its subpaths are automatically closed and drawn to the <canvas> using the current fill style. To set the fill style, use the context’s fillStyle attribute.

ctx.fillStyle = value;

The fillStyle attribute value can be a CSS <color> value, gradient object, or pattern object. The default value is "#000000", which is the CSS <color> value for the color black in hexadecimal (hex) notation. The fillStyle attribute is stored as part of the 2D context’s drawing state.

var currentFillStyle = ctx.fillStyle;

The fillStyle attribute can also be used to get the current fill style. If the fill style is a gradient or pattern, the fillStyle attribute returns a gradient object or pattern object; if the fill style is a color with an alpha value of 1.0, it returns the color as a string using hexadecimal notation; and if the fill style is a color with an alpha value less than 1.0, it returns the color as a string using the CSS rgba() functional-notation. To learn more about CSS <color> values, read how to define a color.

Example

Set and get the stroke style

When a path is stroked, it is drawn to the <canvas> using the current stroke style. To set the stroke style, use the context’s strokeStyle attribute.

ctx.strokeStyle = value;

The strokeStyle attribute value can be a CSS <color> value, gradient object, or pattern object. The default value is "#000000", which is the CSS <color> value for the color black in hexadecimal (hex) notation. The strokeStyle attribute is stored as part of the 2D context’s drawing state.

var currentStrokeStyle = ctx.strokeStyle;

The strokeStyle attribute can also be used to get the current stroke style. If the stroke style is a gradient or pattern, the strokeStyle attribute returns a gradient object or pattern object; if the stroke style is a color with an alpha value of 1.0, it returns the color as a string using hexadecimal notation; and if the stroke style is a color with an alpha value less than 1.0, it returns the color as a string using the CSS rgba() functional-notation. To learn more about CSS <color> values, read how to define a color.

Example

Define a color

HTML and CSS use the RGB color model to create colors by combining red, green, and blue light in different intensities. Because these red, green, and blue color components are each represented by eight bits (one byte) of computer memory, their intensities can range from 0 to 255 (28 = 256).

The <canvas> element uses CSS <color> values to define colors. There are many different ways to describe a color in CSS; we are going to focus on three of them. First, all modern web browsers recognize 141 pre-defined colors, such as “Black”, “White”, “Red”, “Yellow”, “Orange”, “Magenta”, and “Violet”. If we use the color “Orange”, the browser automatically translates it into red: 255, green: 165, and blue: 0. While the pre-defined colors can be handy, there are only 141 of them (out of a possible 16.7 million 24-bit RGB colors), and the list is very arbitrary. It includes: “BurlyWood”, “LemonChiffon”, “PapayaWhip”, “Moccasin”, “Tomato”, “LawnGreen”, “CornflowerBlue”, “MintCream”, “DarkSalmon”, and “LavenderBlush”. Color names are case-insensitive.

Second, colors may be described in CSS using hexadecimal (hex) notation. Hexadecimal numbers are written in base-16: each digit can have a value from 0-15, and the digit to the left of the ones’ place is the sixteens’ place, not the tens’ place. To write digits greater than 9, we use letters. So, a = 10, b = 11, and c = 12. The color “Orange” in hexadecimal notation is “#ffa500”. The first two digits represent the red intensity (ff = 255), the middle two digits represent the green intensity (a5 = 165), and the last two digits represent the blue intensity (00 = 0).

Third, colors may be described in CSS using rgba() functional-notation. When we use this notation, it looks like we are passing a function named rgba() four values: the red intensity, the green intensity, the blue intensity, and an alpha value. However, like all CSS <color> values, it is really a text string, which is why it is written with quotation marks. The color “Orange” in rgba() functional-notation is "rgba(255, 165, 0, 1)". Intensity values must be whole numbers between 0 and 255. The alpha value is used to set the color’s opacity. An alpha value of 1 means the color is completely opaque and an alpha value of 0 means the color is completely transparent. An alpha value between 0 and 1 means the color is translucent, or partially transparent.

ctx.fillStyle = "orange";
ctx.fillStyle = "#ffa500";
ctx.fillStyle = "rgba(255, 165, 0, 1)";

While all three of these lines of code set the fill style to the exact same color, I prefer the CSS rgba() functional-notation because we can use it to set the alpha value and the intensity values are easier to interpret… especially if you are unfamiliar with hexadecimals.

Examples

Create a linear gradient

A linear gradient can be used as a fill or stroke style. To create a linear gradient object, use the context’s createLinearGradient() function, and then add color stops using the linear gradient object’s addColorStop() function.

var gradientObject = ctx.createLinearGradient(x0, y0, x1, y1);
 
gradientObject.addColorStop(0, CSS <color> value0);
gradientObject.addColorStop(1, CSS <color> value1);

The createLinearGradient() function creates a gradient along the line connecting the two points passed to it. The coordinates of these two points are in the 2D context’s coordinate space. The point at (x0, y0) is color stop 0 and the point at (x1, y1) is color stop 1. The addColorStop() function is used to specify the color of any point between color stop 0 and color stop 1. For example, we can specify the color of the point halfway between color stop 0 and color stop 1 simply by adding color stop 0.5.

The color of any point along the line between color stops is calculated using linear interpolation; and since the line extends to infinite in both directions, any point before the first color stop is the color of the first color stop, and any point after the last color stop is the color of the last color stop. The color of any point not on the line can be found by drawing a perpendicular line from the gradient line to the point. All points along the perpendicular line have the same color. If no color stops have been added, the linear gradient is transparent.

Once we have created the linear gradient object, we can assign it to the fillStyle attribute or the strokeStyle attribute.

ctx.fillStyle = gradientObject;
ctx.strokeStyle = gradientObject;

This assignment is live, which means that any changes made to the linear gradient object, such as the addition of a color stop, will be in effect when the fill or stroke style is applied.