https://github.com/dmnsgn/canvas-pattern

Draw and cache a repeated pattern on a canvas context.
https://github.com/dmnsgn/canvas-pattern

cache canvas pattern

Last synced: 4 months ago
JSON representation

Draw and cache a repeated pattern on a canvas context.

• Host: GitHub
• URL: https://github.com/dmnsgn/canvas-pattern
• Owner: dmnsgn
• License: mit
• Created: 2021-11-09T20:49:56.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2024-07-06T15:23:42.000Z (12 months ago)
• Last Synced: 2025-02-03T16:17:28.513Z (5 months ago)
• Topics: cache, canvas, pattern
• Language: JavaScript
• Homepage: https://dmnsgn.github.io/canvas-pattern/
• Size: 1.21 MB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# canvas-pattern

[![npm version](https://img.shields.io/npm/v/canvas-pattern)](https://www.npmjs.com/package/canvas-pattern)

[![stability-stable](https://img.shields.io/badge/stability-stable-green.svg)](https://www.npmjs.com/package/canvas-pattern)

[![npm minzipped size](https://img.shields.io/bundlephobia/minzip/canvas-pattern)](https://bundlephobia.com/package/canvas-pattern)

[![dependencies](https://img.shields.io/librariesio/release/npm/canvas-pattern)](https://github.com/dmnsgn/canvas-pattern/blob/main/package.json)

[![types](https://img.shields.io/npm/types/canvas-pattern)](https://github.com/microsoft/TypeScript)

[![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-fa6673.svg)](https://conventionalcommits.org)

[![styled with prettier](https://img.shields.io/badge/styled_with-Prettier-f8bc45.svg?logo=prettier)](https://github.com/prettier/prettier)

[![linted with eslint](https://img.shields.io/badge/linted_with-ES_Lint-4B32C3.svg?logo=eslint)](https://github.com/eslint/eslint)

[![license](https://img.shields.io/github/license/dmnsgn/canvas-pattern)](https://github.com/dmnsgn/canvas-pattern/blob/main/LICENSE.md)

Draw and cache a repeated pattern on a canvas context.

[![paypal](https://img.shields.io/badge/donate-paypal-informational?logo=paypal)](https://paypal.me/dmnsgn)

[![coinbase](https://img.shields.io/badge/donate-coinbase-informational?logo=coinbase)](https://commerce.coinbase.com/checkout/56cbdf28-e323-48d8-9c98-7019e72c97f3)

[![twitter](https://img.shields.io/twitter/follow/dmnsgn?style=social)](https://twitter.com/dmnsgn)

![](https://raw.githubusercontent.com/dmnsgn/canvas-pattern/main/screenshot.png)

## Installation

```bash

npm install canvas-pattern

```

## Usage

```js

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](#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](#CanvasPatternRepetition) | A DOMString indicating how to repeat the pattern's image.                  |

| [x]          | number                                              |                                                                            |

| [y]          | number                                              |                                                                            |

| [width]      | number                                              |                                                                            |

| [height]     | number                                              |                                                                            |

## License

MIT. See [license file](https://github.com/dmnsgn/canvas-pattern/blob/main/LICENSE.md).