# @daeinc/canvas

> Canvas utilities

Latest version **0.16.3** (published 2024-12-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install @daeinc/canvas
pnpm add @daeinc/canvas
yarn add @daeinc/canvas
bun add @daeinc/canvas
```

## Health

**Score 40/100 (D)** — status: maintenance-mode.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.16.3 |
| Published | 2024-12-10 |
| First published | 2022-10-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 27.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Daeinc |
| Maintainers | daeinc |

## Links

- npm: https://www.npmjs.com/package/@daeinc/canvas
- Repository: https://github.com/cdaein/canvas
- Homepage: https://github.com/cdaein/canvas#readme
- Issues: https://github.com/cdaein/canvas/issues
- npm.io page: https://npm.io/package/@daeinc/canvas

## Dependencies (1)

- [@daeinc/dom](https://npm.io/package/@daeinc/dom.md) ^0.4.1

## Recent versions

- 0.16.3 (latest) — 2024-12-10
- 0.16.2 — 2024-12-10
- 0.16.1 — 2024-12-10
- 0.15.0 — 2024-02-23
- 0.14.5 — 2023-02-27
- 0.14.4 — 2023-02-27
- 0.14.3 — 2023-02-27
- 0.14.2 — 2023-02-27
- 0.14.1 — 2023-02-27
- 0.14.0 — 2023-02-27
- 0.13.0 — 2023-01-21
- 0.12.1 — 2023-01-06
- 0.12.0 — 2023-01-05
- 0.11.1 — 2023-01-05
- 0.11.0 — 2023-01-05
- … 19 more at https://npm.io/package/@daeinc/canvas/versions

## README

# @daeinc/canvas

![npm version badge](https://img.shields.io/npm/v/@daeinc/canvas)
![npm bundle size badge](https://img.shields.io/bundlephobia/min/@daeinc/canvas)

## Install

```sh
npm i @daeinc/canvas
```

then,

```ts
import { createCanvas, ... } from "@daeinc/canvas"
```

## Functions

Documentation is updated for `0.16.0`.

### createCanvas

```ts
const createCanvas: ({
  parent,
  context,
  width,
  height,
  pixelRatio,
  scaleContext,
  attributes,
}: {
  parent?: string | Element | null;
  context?: "2d" | "webgl" | "webgl2" | "webgpu";
  width: number;
  height: number;
  pixelRatio?: number;
  scaleContext?: boolean;
  attributes?:
    | CanvasRenderingContext2DSettings
    | WebGLContextAttributes;
})
```

Create a new canvas and return `{ canvas, context, width, height }` in 2d or WebGPU and `{ canvas, gl, width, height }` in webgl.

The parent can be either `string` (will be used for `querySelector()`) or `Element`. If `parent` is `undefined` or `null`, the canvas is not attached to the document. Returned `width` and `height` may not be the same as `canvas.width` and `canvas.height` due to `pixelRatio` scaling.

`context` supports `2d`, `webgl`, `webgl2` and `webgpu` and creates a proper context. When `webgl` context is created, `gl.viewport()` is internally called to scale context according to `pixelRatio` parameter.

### createOffscreenCanvas

```ts
const createOffscreenCanvas: ({
  context,
  width,
  height,
  pixelRatio,
  scaleContext,
  attributes,
}: {
  context: "2d" | "webgl" | "webgl2";
  width: number;
  height: number;
  pixelRatio?: number;
  scaleContext?: boolean;
  attributes?:
    | CanvasRenderingContext2DSettings
    | WebGLContextAttributes;
})
```

Creates an `OffscreenCanvas`.

### resizeCanvas

```ts
const resizeCanvas: ({
  canvas,
  context,
  width,
  height,
  pixelRatio,
  scaleContext,
  attributes,
}: {
  canvas: HTMLCanvasElement;
  context: "2d" | "webgl" | "webgl2" | "webgpu";
  width: number;
  height: number;
  pixelRatio?: number;
  scaleContext?: boolean;
  attributes?: CanvasRenderingContext2DSettings | WebGLContextAttributes;
}) => {
  canvas: HTMLCanvasElement;
  context?:
    | CanvasRenderingContext2D
    | WebGLRenderingContext
    | WebGL2RenderingContext;
  gl?: WebGLRenderingContext | WebGL2RenderingContext;
  width: number;
  height: number;
};
```

Resize canvas and return data `{ canvas, context?, gl?, width, height }`. When `scaleContext=true`, it also scale the context to `pixelRatio`. `scaleContext` has no effect on WebGPU canvas.

## License

MIT

---
_Source: https://npm.io/package/@daeinc/canvas · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._