{"id":13671442,"url":"https://github.com/jondavidjohn/hidpi-canvas-polyfill","last_synced_at":"2025-10-22T21:25:31.946Z","repository":{"id":11352076,"uuid":"13783315","full_name":"jondavidjohn/hidpi-canvas-polyfill","owner":"jondavidjohn","description":":computer:    A JavaScript drop-in module to polyfill consistent and automatic HiDPI Canvas support.","archived":false,"fork":false,"pushed_at":"2019-01-23T23:58:27.000Z","size":58,"stargazers_count":668,"open_issues_count":9,"forks_count":260,"subscribers_count":24,"default_branch":"master","last_synced_at":"2025-04-18T23:35:45.780Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://jondavidjohn.github.io/hidpi-canvas-polyfill","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jondavidjohn.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-10-22T19:20:43.000Z","updated_at":"2025-04-09T20:09:10.000Z","dependencies_parsed_at":"2022-08-25T02:51:55.286Z","dependency_job_id":null,"html_url":"https://github.com/jondavidjohn/hidpi-canvas-polyfill","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jondavidjohn%2Fhidpi-canvas-polyfill","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jondavidjohn%2Fhidpi-canvas-polyfill/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jondavidjohn%2Fhidpi-canvas-polyfill/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jondavidjohn%2Fhidpi-canvas-polyfill/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jondavidjohn","download_url":"https://codeload.github.com/jondavidjohn/hidpi-canvas-polyfill/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251187109,"owners_count":21549583,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-02T09:01:09.768Z","updated_at":"2025-10-22T21:25:31.848Z","avatar_url":"https://github.com/jondavidjohn.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"---\n\u003cp align=\"center\"\u003e\n  \u003ch3 align=\"center\"\u003eDo you use webpack?\u003c/h3\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  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 \u003cstrong\u003efor every pull request\u003c/strong\u003e?\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  Check it out at \u003ca href=\"https://packtracker.io/?utm_source=github\u0026utm_medium=hidpi\u0026utm_campaign=links\"\u003epacktracker.io\u003c/a\u003e.\n\u003c/p\u003e\n\n---\n\n# HiDPI Canvas Polyfill\n\n[![Build Status](https://travis-ci.org/jondavidjohn/hidpi-canvas-polyfill.svg?branch=master)](https://travis-ci.org/jondavidjohn/hidpi-canvas-polyfill)\n\nThis is a drop-in polyfill to scale canvas appropriately to maintain sharpness\nin browsers that currently do not provide the appropriately scaled backing\nstore to do this automatically.\n\nAs of this writing Safari is the only browser that accounts for this.\n\nThe goal of this drop-in is to make this behavior consistent accross all browsers,\nwithout having to modify any of your canvas code.\n\n## Scope\n\nCurrently this plugin handles most general cross browser drawing functions, but\nfeel free to send Pull Requests as you find functions you need supported.\n\nIf the function simply needs all or some of its arguments multiplied by the ratio,\nit should simply require you to add it to the `ratioArgs` object, following the proper\npattern.\n\nIt currently leaves images alone, so to retinize images on your canvas, simply\nduplicate the getPixelRatio function in your code and divide your image dimensions\nby the provided ratio.\n\n```js\nvar getPixelRatio = function(context) {\n    var backingStore = context.backingStorePixelRatio ||\n          context.webkitBackingStorePixelRatio ||\n          context.mozBackingStorePixelRatio ||\n          context.msBackingStorePixelRatio ||\n          context.oBackingStorePixelRatio ||\n          context.backingStorePixelRatio || 1;\n\n    return (window.devicePixelRatio || 1) / backingStore;\n};\n```\n\n## Usage\n\nTo use this module, simply include it before any of your canvas code\n\n```html\n  ...\n  \u003cscript src=\".../dist/hidpi-canvas.min.js\"\u003e\u003c/script\u003e\n  \u003cscript src=\".../your-canvas-stuff.js\"\u003e\u003c/script\u003e\n  ...\n```\n\n### Bower\n\nThis module is also installable via [bower](http://bower.io/)\n\n    bower install hidpi-canvas\n\n## TODO\n\n  - More Complete context function coverage\n  - Figure out how to write tests for this type of thing\n\n## Development\n\nSee [CONTRIBUTING.md](https://github.com/jondavidjohn/hidpi-canvas-polyfill/blob/develop/CONTRIBUTING.md)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjondavidjohn%2Fhidpi-canvas-polyfill","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjondavidjohn%2Fhidpi-canvas-polyfill","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjondavidjohn%2Fhidpi-canvas-polyfill/lists"}