canvas-pattern
v1.0.3
Published
Draw and cache a repeated pattern on a canvas context.
Downloads
12
Readme
canvas-pattern
Draw and cache a repeated pattern on a canvas context.
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
Typedefs
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.