Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More

@thi.ng/adapt-dpi

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@thi.ng/adapt-dpi

HDPI canvas adapter / styling utility


Version published
Weekly downloads
11
increased by37.5%
Maintainers
1
Weekly downloads
 
Created

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 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

FAQs

Package last updated on 16 Aug 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts