@thi.ng/adapt-dpi
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.6 • Public • Published

    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:

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

    Install

    npm i @thi.ng/adapt-dpi

    DownloadsWeekly Downloads

    61

    Version

    2.0.6

    License

    Apache-2.0

    Unpacked Size

    21.4 kB

    Total Files

    6

    Last publish

    Collaborators

    • thi.ng