canvas-pattern

npm version stability-stable npm minzipped size dependencies types Conventional Commits styled with prettier linted with eslint license

Draw and cache a repeated pattern on a canvas context.

paypal coinbase twitter

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.