This project is part of the
@thi.ng/umbrella monorepo.
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 pixel size, and resizes canvas pixel
buffer itself based on DPR (e.g. 2x size).
Status
STABLE - used in production
Installation
yarn add @thi.ng/adapt-dpi
// ES module
<script type="module" src="https://unpkg.com/@thi.ng/adapt-dpi?module" crossorigin></script>
// UMD
<script src="https://unpkg.com/@thi.ng/adapt-dpi/lib/index.umd.js" crossorigin></script>
Package sizes (gzipped, pre-treeshake): ESM: 146 bytes / CJS: 193 bytes / UMD: 311 bytes
Dependencies
None
Usage examples
Several demos in this repo's
/examples
directory are using this package.
A selection:
Screenshot | Description | Live 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 } from "@thi.ng/adapt-dpi";
const canvas = document.createElement("canvas");
adaptDPI(canvas, 640, 480);
Authors
Karsten Schmidt
License
© 2015 - 2020 Karsten Schmidt // Apache Software License 2.0