# 
[](https://www.npmjs.com/package/@thi.ng/canvas)
[](https://mastodon.thi.ng/@toxi)
> [!NOTE]
> This is one of 214 standalone projects, maintained as part
> of the [@thi.ng/umbrella](https://codeberg.org/thi.ng/umbrella/) ecosystem
> and anti-framework.
>
> 🚀 Please help me to work full-time on these projects by [sponsoring
> me](https://codeberg.org/thi.ng/umbrella/src/branch/develop/CONTRIBUTING.md#donations).
> Thank you! ❤️
- [About](#about)
- [Status](#status)
- [Installation](#installation)
- [Dependencies](#dependencies)
- [Usage examples](#usage-examples)
- [API](#api)
- [Authors](#authors)
- [License](#license)
## About
Canvas creation & HDPI support helpers.
This package provides small frequently used helpers for HTML Canvas 2D creation
& resizing:
- [`adaptiveCanvas2d()`](https://docs.thi.ng/umbrella/canvas/functions/adaptiveCanvas2d.html)
- [`canvas2d()`](https://docs.thi.ng/umbrella/canvas/functions/canvas2d.html)
- [`pixelCanvas2d()`](https://docs.thi.ng/umbrella/canvas/functions/pixelCanvas2d.html)
- [`adaptDPI()`](https://docs.thi.ng/umbrella/canvas/functions/adaptDPI.html)
- [`isHighDPI()`](https://docs.thi.ng/umbrella/canvas/functions/isHighDPI.html)
## Status
**STABLE** - used in production
[Search or submit any issues for this package](https://codeberg.org/thi.ng/umbrella/issues?q=%5Bcanvas%5D)
Note: Some functions were previously part of the
[thi.ng/adapt-dpi](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/adapt-dpi)
and
[thi.ng/pixel](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/pixel)
packages, but have been migrated to this package for better/smaller re-use...
## Installation
```bash
yarn add @thi.ng/canvas
```
ESM import:
```ts
import * as can from "@thi.ng/canvas";
```
Browser ESM import:
```html
```
[JSDelivr documentation](https://www.jsdelivr.com/)
Package sizes (brotli'd, pre-treeshake): ESM: 403 bytes
## Dependencies
None
## Usage examples
28 projects in this repo's
[/examples](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples)
directory are using this package:
| Screenshot | Description | Live demo | Source |
|:----------------------------------------------------------------------------------------------------------------------------|:---------------------------------------------------------------------------------------------|:-----------------------------------------------------------|:------------------------------------------------------------------------------------------------|
| 
| Interactive & reactive image blurhash generator | [Demo](https://demo.thi.ng/umbrella/blurhash/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/blurhash) |
| 
| Parametrically design calibration sheet for B&W photography | [Demo](https://demo.thi.ng/umbrella/calibration-sheet/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/calibration-sheet) |
| 
| Self-modifying, animated typographic grid with emergent complex patterns | [Demo](https://demo.thi.ng/umbrella/canvas-recorder/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/canvas-recorder) |
| 
| Polygon point classification (inside/boundary/outside) | [Demo](https://demo.thi.ng/umbrella/geom-classify-point/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/geom-classify-point) |
| 
| Shape conversions & operations using polygons with holes | [Demo](https://demo.thi.ng/umbrella/geom-complex-poly/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/geom-complex-poly) |
| 
| Embedding thi.ng/hiccup data/elements in thi.ng/geom shape hierarchies | [Demo](https://demo.thi.ng/umbrella/geom-extra-hiccup/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/geom-extra-hiccup) |
| 
| geom-fuzz basic shape & fill examples | [Demo](https://demo.thi.ng/umbrella/geom-fuzz-basics/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/geom-fuzz-basics) |
| 
| Iterating the unique edges of a tessellation | [Demo](https://demo.thi.ng/umbrella/geom-unique-edges/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/geom-unique-edges) |
| 
| Visualization of different grid iterator strategies | [Demo](https://demo.thi.ng/umbrella/grid-iterators/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/grid-iterators) |
| 
| Basic hiccup-based canvas drawing | [Demo](https://demo.thi.ng/umbrella/hiccup-canvas-basics/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/hiccup-canvas-basics) |
| 
| Barnsley fern IFS fractal renderer | [Demo](https://demo.thi.ng/umbrella/ifs-fractal/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/ifs-fractal) |
| 
| Optical flow analysis of web cam or video inputs | [Demo](https://demo.thi.ng/umbrella/optical-flow/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/optical-flow) |
| 
| Pixel buffer manipulations | [Demo](https://demo.thi.ng/umbrella/pixel-basics/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/pixel-basics) |
| 
| Showcase of various dithering algorithms | [Demo](https://demo.thi.ng/umbrella/pixel-dither/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/pixel-dither) |
| 
| Image dithering and remapping using indexed palettes | [Demo](https://demo.thi.ng/umbrella/pixel-indexed/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/pixel-indexed) |
| 
| Normal map creation/conversion basics | [Demo](https://demo.thi.ng/umbrella/pixel-normal-map/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/pixel-normal-map) |
| 
| RGB waveform image analysis | [Demo](https://demo.thi.ng/umbrella/pixel-waveform/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/pixel-waveform) |
| 
| Animated, iterative polygon subdivisions & visualization | [Demo](https://demo.thi.ng/umbrella/poly-subdiv/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/poly-subdiv) |
| 
| Port-Duff image compositing / alpha blending | [Demo](https://demo.thi.ng/umbrella/porter-duff/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/porter-duff) |
| 
| Steering behavior drawing with alpha-blended shapes | [Demo](https://demo.thi.ng/umbrella/rasterize-blend/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/rasterize-blend) |
| 
| Basic 2D scenegraph example with pan/zoom functionality | [Demo](https://demo.thi.ng/umbrella/scenegraph-pan-zoom/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/scenegraph-pan-zoom) |
| 
| Entity Component System w/ 100k 3D particles | [Demo](https://demo.thi.ng/umbrella/soa-ecs/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/soa-ecs) |
| 
| Visual comparison of biased vs. unbiased normal vectors projected on the surface of a sphere | [Demo](https://demo.thi.ng/umbrella/unbiased-normals/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/unbiased-normals) |
| 
| WebGL cube maps with async texture loading | [Demo](https://demo.thi.ng/umbrella/webgl-cubemap/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/webgl-cubemap) |
| 
| WebGL instancing, animated grid | [Demo](https://demo.thi.ng/umbrella/webgl-grid/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/webgl-grid) |
| 
| WebGL MSDF text rendering & particle system | [Demo](https://demo.thi.ng/umbrella/webgl-msdf/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/webgl-msdf) |
| | Minimal multi-pass / GPGPU example | [Demo](https://demo.thi.ng/umbrella/webgl-multipass/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/webgl-multipass) |
| 
| Interactively drawing to & reading from a WebGL offscreen render texture | [Demo](https://demo.thi.ng/umbrella/webgl-texture-paint/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/webgl-texture-paint) |
## API
[Generated API docs](https://docs.thi.ng/umbrella/canvas/)
TODO
## Authors
- [Karsten Schmidt](https://thi.ng)
If this project contributes to an academic publication, please cite it as:
```bibtex
@misc{thing-canvas,
title = "@thi.ng/canvas",
author = "Karsten Schmidt",
note = "https://thi.ng/canvas",
year = 2023
}
```
## License
© 2023 - 2026 Karsten Schmidt // Apache License 2.0