[!NOTE] This is one of 211 standalone projects, maintained as part of the @thi.ng/umbrella monorepo and anti-framework.

🚀 Please help me to work full-time on these projects by sponsoring me on GitHub. Thank you! ❤️

• About
• Status
• Installation
• Dependencies
• Usage examples
• API
• Authors
• License

About

Canvas creation & HDPI support helpers.

This package provides small frequently used helpers for HTML Canvas 2D creation & resizing:

• adaptiveCanvas2d()
• canvas2d()
• pixelCanvas2d()
• adaptDPI()
• isHighDPI()

Status

STABLE - used in production

Search or submit any issues for this package

Note: Some functions were previously part of the thi.ng/adapt-dpi and thi.ng/pixel packages, but have been migrated to this package for better/smaller re-use...

Installation

yarn add @thi.ng/canvas

ESM import:

import * as can from "@thi.ng/canvas";

Browser ESM import:

<script type="module" src="https://esm.run/@thi.ng/canvas"></script>

JSDelivr documentation

Package sizes (brotli'd, pre-treeshake): ESM: 403 bytes

Dependencies

None

Usage examples

27 projects in this repo's /examples directory are using this package:

| Screenshot | Description | Live demo | Source | |:----------------------------------------------------------------------------------------------------------------------------|:---------------------------------------------------------------------------------------------|:-----------------------------------------------------------|:----------------------------------------------------------------------------------------| | | Interactive & reactive image blurhash generator | Demo | Source | | | Self-modifying, animated typographic grid with emergent complex patterns | Demo | Source | | | Polygon point classification (inside/boundary/outside) | Demo | Source | | | Shape conversions & operations using polygons with holes | Demo | Source | | | Embedding thi.ng/hiccup data/elements in thi.ng/geom shape hierarchies | Demo | Source | | | geom-fuzz basic shape & fill examples | Demo | Source | | | Iterating the unique edges of a tessellation | Demo | Source | | | Visualization of different grid iterator strategies | Demo | Source | | | Basic hiccup-based canvas drawing | Demo | Source | | | Barnsley fern IFS fractal renderer | Demo | Source | | | Optical flow analysis of web cam or video inputs | Demo | Source | | | Pixel buffer manipulations | Demo | Source | | | Showcase of various dithering algorithms | Demo | Source | | | Image dithering and remapping using indexed palettes | Demo | Source | | | Normal map creation/conversion basics | Demo | Source | | | RGB waveform image analysis | Demo | Source | | | Animated, iterative polygon subdivisions & visualization | Demo | Source | | | Port-Duff image compositing / alpha blending | Demo | Source | | | Steering behavior drawing with alpha-blended shapes | Demo | Source | | | Basic 2D scenegraph example with pan/zoom functionality | Demo | Source | | | Entity Component System w/ 100k 3D particles | Demo | Source | | | Visual comparison of biased vs. unbiased normal vectors projected on the surface of a sphere | Demo | Source | | | WebGL cube maps with async texture loading | Demo | Source | | | WebGL instancing, animated grid | Demo | Source | | | WebGL MSDF text rendering & particle system | Demo | Source | | | Minimal multi-pass / GPGPU example | Demo | Source | | | Interactively drawing to & reading from a WebGL offscreen render texture | Demo | Source |

API

Generated API docs

TODO

Authors

• Karsten Schmidt

If this project contributes to an academic publication, please cite it as:

@misc{thing-canvas,
  title = "@thi.ng/canvas",
  author = "Karsten Schmidt",
  note = "https://thi.ng/canvas",
  year = 2023
}

License

© 2023 - 2025 Karsten Schmidt // Apache License 2.0