https://github.com/jondavidjohn/hidpi-canvas-polyfill

:computer: A JavaScript drop-in module to polyfill consistent and automatic HiDPI Canvas support.
https://github.com/jondavidjohn/hidpi-canvas-polyfill

Last synced: 8 days ago
JSON representation

:computer: A JavaScript drop-in module to polyfill consistent and automatic HiDPI Canvas support.

• Host: GitHub
• URL: https://github.com/jondavidjohn/hidpi-canvas-polyfill
• Owner: jondavidjohn
• License: other
• Created: 2013-10-22T19:20:43.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2019-01-23T23:58:27.000Z (over 5 years ago)
• Last Synced: 2024-06-19T15:58:25.738Z (8 days ago)
• Language: JavaScript
• Homepage: http://jondavidjohn.github.io/hidpi-canvas-polyfill
• Size: 56.6 KB
• Stars: 670
• Watchers: 25
• Forks: 263
• Open Issues: 9
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG
  • Contributing: CONTRIBUTING.md
  • License: LICENSE.txt

Lists

• awesome-github-star - hidpi-canvas-polyfill - in module to polyfill consistent and automatic HiDPI Canvas support. | jondavidjohn | 664 | (JavaScript)

README

        
---



  
Do you use webpack?




  Wish your team made reducing the size of your webpack builds a priority? Want to know how the changes you're making impact your asset profile for every pull request?





  Check it out at packtracker.io.



---

# HiDPI Canvas Polyfill

[![Build Status](https://travis-ci.org/jondavidjohn/hidpi-canvas-polyfill.svg?branch=master)](https://travis-ci.org/jondavidjohn/hidpi-canvas-polyfill)

This is a drop-in polyfill to scale canvas appropriately to maintain sharpness

in browsers that currently do not provide the appropriately scaled backing

store to do this automatically.

As of this writing Safari is the only browser that accounts for this.

The goal of this drop-in is to make this behavior consistent accross all browsers,

without having to modify any of your canvas code.

## Scope

Currently this plugin handles most general cross browser drawing functions, but

feel free to send Pull Requests as you find functions you need supported.

If the function simply needs all or some of its arguments multiplied by the ratio,

it should simply require you to add it to the `ratioArgs` object, following the proper

pattern.

It currently leaves images alone, so to retinize images on your canvas, simply

duplicate the getPixelRatio function in your code and divide your image dimensions

by the provided ratio.

```js

var getPixelRatio = function(context) {

    var backingStore = context.backingStorePixelRatio ||

          context.webkitBackingStorePixelRatio ||

          context.mozBackingStorePixelRatio ||

          context.msBackingStorePixelRatio ||

          context.oBackingStorePixelRatio ||

          context.backingStorePixelRatio || 1;

    return (window.devicePixelRatio || 1) / backingStore;

};

```

## Usage

To use this module, simply include it before any of your canvas code

```html

  ...

  

  

  ...

```

### Bower

This module is also installable via [bower](http://bower.io/)

    bower install hidpi-canvas

## TODO

  - More Complete context function coverage

  - Figure out how to write tests for this type of thing

## Development

See [CONTRIBUTING.md](https://github.com/jondavidjohn/hidpi-canvas-polyfill/blob/develop/CONTRIBUTING.md)