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

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.