Draw and cache a repeated pattern on a canvas context.
npm install canvas-pattern
import canvasPattern from "canvas-pattern";
import createCanvasContext from "canvas-context";
const { canvas, context } = createCanvasContext("2d");
document.body.appendChild(canvas);
const pattern = new Image();
pattern.src = "pattern.png";
canvasPattern(context, pattern);
"repeat" | "repeat-x" | "repeat-y" | "no-repeat"ObjectOptions to draw. All optional.
CanvasPattern ⏏Draw and cache a repeated pattern on a canvas context.
Kind: Exported function
| Param | Type | Default | Description |
|---|---|---|---|
| context | CanvasRenderingContext2D |
The context to draw the pattern to | |
| source | CanvasImageSource |
The pattern to be drawn | |
| [options] | CanvasPatternOptions |
{} |
The options to position the pattern and controls its repetition |
"repeat" | "repeat-x" | "repeat-y" | "no-repeat"ObjectOptions to draw. All optional.
Kind: global typedef Properties
| Name | Type | Description |
|---|---|---|
| [pattern] | CanvasPattern |
The CanvasPattern to draw. Created and returned by the function for reuse. |
| [repetition] | CanvasPatternRepetition |
A DOMString indicating how to repeat the pattern's image. |
| [x] | number |
|
| [y] | number |
|
| [width] | number |
|
| [height] | number |
MIT. See license file.