This project is part of the
@thi.ng/umbrella monorepo and anti-framework.
About
HDPI canvas adapter / styling utility.
Attempts to determine display pixel density via window.devicePixelRatio
(default 1.0) and resizes canvas accordingly. I.e. If DPR != 1.0, attaches
explicit width
and height
CSS properties to force canvas to given CSS pixel
size, and resizes canvas pixel buffer itself based on DPR (e.g. 2x size).
Status
STABLE - used in production
Search or submit any issues for this package
Installation
yarn add @thi.ng/adapt-dpi
ES module import:
<script type="module" src="https://cdn.skypack.dev/@thi.ng/adapt-dpi"></script>
Skypack documentation
For Node.js REPL:
const adaptDpi = await import("@thi.ng/adapt-dpi");
Package sizes (brotli'd, pre-treeshake): ESM: 135 bytes
Dependencies
None
Usage examples
Several projects in this repo's
/examples
directory are using this package:
Screenshot | Description | Live demo | Source |
---|
| Self-modifying, animated typographic grid with emergent complex patterns | Demo | Source |
| Steering behavior drawing with alpha-blended shapes | Demo | Source |
| Entity Component System w/ 100k 3D particles | 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 |
API
Generated API docs
import { adaptDPI, isHighDPI } from "@thi.ng/adapt-dpi";
const canvas = document.createElement("canvas");
adaptDPI(canvas, 640, 480);
if (isHighDPI()) {
}
Authors
If this project contributes to an academic publication, please cite it as:
@misc{thing-adapt-dpi,
title = "@thi.ng/adapt-dpi",
author = "Karsten Schmidt",
note = "https://thi.ng/adapt-dpi",
year = 2015
}
License
© 2015 - 2023 Karsten Schmidt // Apache License 2.0