@thi.ng/adapt-dpi

This project is part of the @thi.ng/umbrella monorepo and anti-framework.

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

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 demos in this repo's /examples directory are using this package.

A selection:

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

• Karsten Schmidt

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