{"id":15383156,"url":"https://github.com/jhildenbiddle/canvas-size","last_synced_at":"2025-04-12T15:37:03.798Z","repository":{"id":37789860,"uuid":"159733643","full_name":"jhildenbiddle/canvas-size","owner":"jhildenbiddle","description":"Determine the maximum area, height, width, and custom dimensions of an HTML canvas element.","archived":false,"fork":false,"pushed_at":"2024-04-16T15:41:28.000Z","size":909,"stargazers_count":245,"open_issues_count":0,"forks_count":18,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-10-30T00:37:07.707Z","etag":null,"topics":["area","canvas","height","html","limit","maximum","offscreen","offscreencanvas","scale","size","test","width","worker"],"latest_commit_sha":null,"homepage":"https://jhildenbiddle.github.io/canvas-size/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jhildenbiddle.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"jhildenbiddle"}},"created_at":"2018-11-29T22:07:37.000Z","updated_at":"2024-10-18T15:40:04.000Z","dependencies_parsed_at":"2024-04-16T16:58:31.324Z","dependency_job_id":"761cc361-9b64-4960-ba6e-6272e0d2c0b3","html_url":"https://github.com/jhildenbiddle/canvas-size","commit_stats":{"total_commits":182,"total_committers":4,"mean_commits":45.5,"dds":"0.14835164835164838","last_synced_commit":"8d9428ca2edee7f2644dbf8a3d98914e6a0e8e90"},"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jhildenbiddle%2Fcanvas-size","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jhildenbiddle%2Fcanvas-size/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jhildenbiddle%2Fcanvas-size/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jhildenbiddle%2Fcanvas-size/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jhildenbiddle","download_url":"https://codeload.github.com/jhildenbiddle/canvas-size/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248590474,"owners_count":21129826,"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":["area","canvas","height","html","limit","maximum","offscreen","offscreencanvas","scale","size","test","width","worker"],"created_at":"2024-10-01T14:35:33.679Z","updated_at":"2025-04-12T15:37:03.750Z","avatar_url":"https://github.com/jhildenbiddle.png","language":"JavaScript","funding_links":["https://github.com/sponsors/jhildenbiddle"],"categories":[],"sub_categories":[],"readme":"# canvas-size\n\n[![NPM](https://img.shields.io/npm/v/canvas-size.svg?style=flat-square)](https://www.npmjs.com/package/canvas-size)\n[![GitHub Workflow Status (master)](https://img.shields.io/github/actions/workflow/status/jhildenbiddle/canvas-size/test.yml?branch=master\u0026label=checks\u0026style=flat-square)](https://github.com/jhildenbiddle/canvas-size/actions?query=branch%3Amaster+)\n[![Codacy code quality](https://img.shields.io/codacy/grade/c39af90445e7478d80fd796d12947495/master?style=flat-square)](https://app.codacy.com/gh/jhildenbiddle/canvas-size/dashboard?branch=master)\n[![Codacy branch coverage](https://img.shields.io/codacy/coverage/c39af90445e7478d80fd796d12947495/master?style=flat-square)](https://app.codacy.com/gh/jhildenbiddle/canvas-size/dashboard?branch=master)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg?style=flat-square)](https://github.com/jhildenbiddle/canvas-size/blob/master/LICENSE)\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/canvas-size/badge)](https://www.jsdelivr.com/package/npm/canvas-size)\n[![Sponsor this project](https://img.shields.io/static/v1?style=flat-square\u0026label=Sponsor\u0026message=%E2%9D%A4\u0026logo=GitHub\u0026color=%23fe8e86)](https://github.com/sponsors/jhildenbiddle)\n\nDetermine the maximum area, height, width, and custom dimensions of an HTML `\u003ccanvas\u003e` element.\n\n- 🚀 [Documentation \u0026 Demo](https://jhildenbiddle.github.io/canvas-size/)\n- 🔬 [Test Results](https://jhildenbiddle.github.io/canvas-size/#/?id=test-results)\n\n## Why?\n\nThe [HTML canvas](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas) element is [widely supported](http://caniuse.com/#feat=canvas) by modern and legacy browsers, but each browser and platform combination imposes unique size limitations (see [Test Results](https://jhildenbiddle.github.io/canvas-size/#/?id=test-results)) that will render a canvas unusable when exceeded. Unfortunately, browsers do not provide a way to determine what their limitations are, nor do they provide any kind of feedback after an unusable canvas has been created. This makes working with large canvas elements a challenge, especially for applications that support a variety of browsers and platforms.\n\nThis micro-library provides the maximum area, height, and width of an HTML canvas element supported by the browser as well as the ability to test custom canvas dimensions. By collecting this information _before_ a new canvas element is created, applications are able to reliably set canvas dimensions within the size limitations of each browser/platform.\n\n## Features\n\n- Determine the maximum `\u003ccanvas\u003e` area, height, and width\n- Test custom `\u003ccanvas\u003e` dimensions\n- Web worker + OffscreenCanvas support\n- UMD and ES6 module available\n- Lightweight (\u003c 1k min+gzip) and dependency-free\n\n**Browser Support**\n\n\u003cimg src=\"https://raw.githubusercontent.com/jhildenbiddle/canvas-size/master/docs/assets/img/chrome.svg\" valign=\"middle\" alt=\"\"\u003e \u003cspan valign=\"middle\"\u003eChrome 24+\u003c/span\u003e\n\u003cbr\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/jhildenbiddle/canvas-size/master/docs/assets/img/edge.svg\" valign=\"middle\" alt=\"\"\u003e \u003cspan valign=\"middle\"\u003eEdge 12+\u003c/span\u003e\n\u003cbr\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/jhildenbiddle/canvas-size/master/docs/assets/img/firefox.svg\" valign=\"middle\" alt=\"\"\u003e \u003cspan valign=\"middle\"\u003eFirefox 26+\u003c/span\u003e\n\u003cbr\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/jhildenbiddle/canvas-size/master/docs/assets/img/safari.svg\" valign=\"middle\" alt=\"\"\u003e \u003cspan valign=\"middle\"\u003eSafari 8+\u003c/span\u003e\n\u003cbr\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/jhildenbiddle/canvas-size/master/docs/assets/img/ie.svg\" valign=\"middle\" alt=\"\"\u003e \u003cspan valign=\"middle\"\u003eInternet Explorer 10+\u003c/span\u003e\n\n## Installation\n\n**NPM**\n\n```bash\nnpm install canvas-size\n```\n\n```js\nimport canvasSize from 'canvas-size';\n```\n\n**CDN**\n\nAvailable on [jsdelivr](https://www.jsdelivr.com/package/npm/canvas-size) (below), [unpkg](https://unpkg.com/browse/canvas-size/), and other CDN services that auto-publish npm packages.\n\n```html\n\u003c!-- ES Module (latest v2.x.x) --\u003e\n\u003cscript\n  type=\"module\"\n  src=\"https://cdn.jsdelivr.net/npm/canvas-size@2/dist/canvas-size.esm.min.js\"\n\u003e\u003c/script\u003e\n```\n\n```html\n\u003c!-- Global \"canvasSize\" (latest v2.x.x) --\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/canvas-size@2\"\u003e\u003c/script\u003e\n```\n\n\u003e 💡 Note the `@` version lock in the URLs above. This prevents breaking changes in future releases from affecting your project and is therefore the safest method of loading dependencies from a CDN. When a new major version is released, you will need to manually update your CDN URLs by changing the version after the `@` symbol.\n\n## Usage \u0026 Options\n\nSee the [documentation site](https://jhildenbiddle.github.io/canvas-size/) for details.\n\n## Sponsorship\n\nA [sponsorship](https://github.com/sponsors/jhildenbiddle) is more than just a way to show appreciation for the open-source authors and projects we rely on; it can be the spark that ignites the next big idea, the inspiration to create something new, and the motivation to share so that others may benefit.\n\nIf you benefit from this project, please consider lending your support and encouraging future efforts by [becoming a sponsor](https://github.com/sponsors/jhildenbiddle).\n\nThank you! 🙏🏻\n\n## Contact \u0026 Support\n\n- Follow 👨🏻‍💻 **@jhildenbiddle** on [Twitter](https://twitter.com/jhildenbiddle) and [GitHub](https://github.com/jhildenbiddle) for announcements\n- Create a 💬 [GitHub issue](https://github.com/jhildenbiddle/canvas-size/issues) for bug reports, feature requests, or questions\n- Add a ⭐️ [star on GitHub](https://github.com/jhildenbiddle/canvas-size) and 🐦 [tweet](https://twitter.com/intent/tweet?url=https%3A%2F%2Fgithub.com%2Fjhildenbiddle%2Fcanvas-size\u0026hashtags=css,developers,frontend,javascript) to promote the project\n- Become a 💖 [sponsor](https://github.com/sponsors/jhildenbiddle) to support the project and future efforts\n\n## License\n\nThis project is licensed under the MIT License. See the [LICENSE](https://github.com/jhildenbiddle/canvas-size/blob/master/LICENSE) for details.\n\nCopyright (c) John Hildenbiddle ([@jhildenbiddle](https://twitter.com/jhildenbiddle))\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjhildenbiddle%2Fcanvas-size","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjhildenbiddle%2Fcanvas-size","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjhildenbiddle%2Fcanvas-size/lists"}