(click anywhere to close)
OPEN MENU

[Canvas] Fill Styles

category: Website | course: Canvas | difficulty:

Fortunately, there aren’t as many different ways to fill a shape as there are to stroke it.  Unfortunately, most of these ways are a little more complex. The four ways to fill a path are: solid colour, linear gradient, radial gradient, and pattern.

Changing the Fill Style

The same property is used for all four ways. Not surprisingly, the syntax is:

fillStyle = value

Solid Colour

To fill a shape with a solid colour, simply use any valid CSS colour code as value.

ctx.beginPath();
ctx.fillStyle="blue";
ctx.rect(20,20,100,100);
ctx.fill();

Gradients

To fill a shape with a gradient, you need to go through several steps. First you need to create your gradient and save it inside a variable, then you use this variable as the value for the fill style.

I assume you have some gradient knowledge from CSS. If you don’t, I strongly recommend learning CSS in the first place.

Colour Stops

As you know from CSS, gradients use colour stops to set points at which the colour should be changed, and it’s not different with our canvas.

To set a colour stop, use

addColorStop(position, colour)

A position of 0 is the start of the gradient, and 1 the end of it.

Linear Gradient

To create a linear gradient, use

createLinearGradient(startX, startY, endX, endY)

This creates a gradient that moves along an imaginary line with starting point (startX, startY), and end point (endX, endY).

var grad = ctx.createLinearGradient(0,0,100,0);
grad.addColorStop(0,"red");
grad.addColorStop(1,"orange");

ctx.beginPath();
ctx.fillStyle=grad;
ctx.rect(20,20,100,100);
ctx.fill();

Radial Gradient

To create a radial gradient, use

createRadialGradient(startX, startY, startR, endX, endY, endR)

Radial gradients are defined as an area between two circles. The inner circle has centre point (startX, startY) and radius startR. The outer circle has centre point (endX, endY) and radius endR.

var grad = ctx.createRadialGradient(50,50,10,50,50,100);
grad.addColorStop(0,"red");
grad.addColorStop(1,"orange");

ctx.beginPath();
ctx.fillStyle = grad;
ctx.rect(20,20,100,100);
ctx.fill();

Patterns

A pattern can be used to fill a shape with an image, or the contents of another canvas. If the pattern is smaller than the shape, it can be repeated, similar to the CSS background-image property.

To create a pattern, use

createPattern(image, repetition)

The first parameter requires a variable holding an image or canvas context. (You’ll learn about loading images later.)

The second parameter can have one of these four values:

Value

Description

“repeat”

Repeats pattern in both directions (default)

“repeat-x”

Repeats pattern only in x-direction

“repeat-y”

Repeats pattern only in y-direction

“no-repeat”

Doesn’t repeat the pattern at all

One tricky thing is that, if you load an image within the canvas itself, you’ll need to wait for it to finish loading before you can assign it to a pattern. You’ll learn everything about image loading soon.

var imageObj = new Image();
imageObj.onload = function() {
	var pat = ctx.createPattern(imageObj,"repeat");
	ctx.beginPath();
	ctx.fillStyle = pat;
	ctx.rect(20,20,100,100);
	ctx.fill();
}
imageObj.src = 'image.png';

As stated earlier, these patterns and gradients can also be used on the stroke instead of fill. This doesn’t require any extra syntax. Yay!

CONTINUE WITH THIS COURSE
Do you like my tutorials?
To keep this site running, donate some motivational food!
Crisps
(€2.00)
Chocolate Milk
(€3.50)
Pizza
(€5.00)