Options
All
  • Public
  • Public/Protected
  • All
Menu

@thi.ng/adapt-dpi

adapt-dpi

npm versionnpm downloads Twitter Follow

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:

ScreenshotDescriptionLive demoSource
Entity Component System w/ 100k 3D particlesDemoSource
WebGL cube maps with async texture loadingDemoSource
WebGL instancing, animated gridDemoSource
WebGL MSDF text rendering & particle systemDemoSource

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

Generated using TypeDoc