Patterns
Patterns can be created from images, video elements, or even other canvas elements. Use these patterns for any fillStyle or strokeStyle property.
| Method | Description |
|---|---|
createPattern(image, repetition) |
Creates a pattern using a source image (like an img, video, or canvas element) and specifies its repetition behavior. |
Repetition Values
The repetition parameter can be set to one of the following values:
| Value | Description |
|---|---|
repeat |
Tiles the image horizontally and vertically (default). |
repeat-x |
Tiles the image horizontally only. |
repeat-y |
Tiles the image vertically only. |
no-repeat |
Draws the source image only once. |
Pattern Example
This example demonstrates how to create a simple repeating pattern from another small canvas:
The next lesson explains how to implement custom line styles.