https://github.com/cdaein/canvas

create and resize HTML5 canvas
https://github.com/cdaein/canvas

canvas

Last synced: about 1 month ago
JSON representation

create and resize HTML5 canvas

• Host: GitHub
• URL: https://github.com/cdaein/canvas
• Owner: cdaein
• License: mit
• Created: 2022-10-21T18:31:27.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2024-02-23T20:41:57.000Z (11 months ago)
• Last Synced: 2024-05-01T18:01:24.225Z (9 months ago)
• Topics: canvas
• Language: TypeScript
• Homepage:
• Size: 348 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

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