canvas-pattern
![license](https://img.shields.io/github/license/dmnsgn/canvas-pattern)
Draw and cache a repeated pattern on a canvas context.
![twitter](https://img.shields.io/twitter/follow/dmnsgn?style=social)
![](https://raw.githubusercontent.com/dmnsgn/canvas-pattern/main/screenshot.png)
Installation
npm install canvas-pattern
Usage
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);
API
Modules
- canvasPattern
Typedefs
- CanvasPatternRepetition :
"repeat"
| "repeat-x"
| "repeat-y"
| "no-repeat"
- CanvasPatternOptions :
object
Options to draw. All optional.
canvasPattern
canvasPattern(context, source, [options]) ⇒ 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 |
CanvasPatternRepetition : "repeat"
| "repeat-x"
| "repeat-y"
| "no-repeat"
Kind: global typedef
CanvasPatternOptions : object
Options 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 | |
License
MIT. See license file.