2.2.49 • Published 1 year ago

@thi.ng/adapt-dpi v2.2.49

Weekly downloads
23
License
Apache-2.0
Repository
github
Last release
1 year ago

adapt-dpi

npm version npm 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 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:

# with flag only for < v16
node --experimental-repl-await

> const adaptDpi = await import("@thi.ng/adapt-dpi");

Package sizes (gzipped, pre-treeshake): ESM: 168 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, 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 - 2021 Karsten Schmidt // Apache Software License 2.0

2.2.49

1 year ago

2.2.48

1 year ago

2.2.47

1 year ago

2.2.46

1 year ago

2.2.45

1 year ago

2.2.44

1 year ago

2.2.43

1 year ago

2.2.42

1 year ago

2.2.41

1 year ago

2.2.40

1 year ago

2.2.39

1 year ago

2.2.38

1 year ago

2.2.37

1 year ago

2.2.35

1 year ago

2.2.36

1 year ago

2.2.34

1 year ago

2.2.32

1 year ago

2.2.31

2 years ago

2.2.30

2 years ago

2.2.29

2 years ago

2.2.28

2 years ago

2.2.27

2 years ago

2.2.26

2 years ago

2.2.17

2 years ago

2.2.18

2 years ago

2.2.15

2 years ago

2.2.16

2 years ago

2.2.14

2 years ago

2.2.19

2 years ago

2.2.24

2 years ago

2.2.25

2 years ago

2.2.22

2 years ago

2.2.23

2 years ago

2.2.20

2 years ago

2.2.21

2 years ago

2.2.13

2 years ago

2.2.12

2 years ago

2.2.11

2 years ago

2.2.10

2 years ago

2.2.9

2 years ago

2.2.7

2 years ago

2.2.8

2 years ago

2.2.5

3 years ago

2.2.4

3 years ago

2.2.6

2 years ago

2.2.1

3 years ago

2.2.0

3 years ago

2.2.3

3 years ago

2.2.2

3 years ago

2.1.10

3 years ago

2.1.11

3 years ago

2.1.8

3 years ago

2.1.9

3 years ago

2.1.6

3 years ago

2.1.7

3 years ago

2.1.5

3 years ago

2.1.4

3 years ago

2.1.2

4 years ago

2.1.1

4 years ago

2.1.3

4 years ago

2.1.0

4 years ago

2.0.4

4 years ago

2.0.6

4 years ago

2.0.3

4 years ago

2.0.2

4 years ago

2.0.1

4 years ago

2.0.0

4 years ago

1.0.22

4 years ago

1.0.23

4 years ago

1.0.21

4 years ago

1.0.20

4 years ago

1.0.19

4 years ago

1.0.18

4 years ago

1.0.17

4 years ago

1.0.16

4 years ago

1.0.14

4 years ago

1.0.13

5 years ago

1.0.12

5 years ago

1.0.11

5 years ago

1.0.10

5 years ago

1.0.9

5 years ago

1.0.8

5 years ago

1.0.7

5 years ago

1.0.6

5 years ago

1.0.5

5 years ago

1.0.4

5 years ago

1.0.3

5 years ago

1.0.2

5 years ago

1.0.1

5 years ago

1.0.0

5 years ago