canvas-size
Advanced tools
Changelog
2.0.0
2024-02-12
catch for exceptionsusePromise option and return promise automatically if supportedsuccess property to promise resultstestTime and totalTime to callback and promise resultsReadme
Determine the maximum area, height, width, and custom dimensions of an HTML <canvas> element.
The HTML canvas element is widely supported by modern and legacy browsers, but each browser and platform combination imposes unique size limitations (see 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.
This 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.
<canvas> area, height, and width<canvas> dimensionsBrowser Support
Chrome 4+
Edge 12+
Firefox 3.6+
Safari 4+
Internet Explorer 10+
NPM
npm install canvas-size
import canvasSize from 'canvas-size';
CDN
Available on jsdelivr (below), unpkg, and other CDN services that auto-publish npm packages.
<!-- ES Module (latest v2.x.x) -->
<script
type="module"
src="https://cdn.jsdelivr.net/npm/canvas-size@2/dist/canvas-size.esm.min.js"
></script>
<!-- Global "canvasSize" (latest v2.x.x) -->
<script src="https://cdn.jsdelivr.net/npm/canvas-size@2"></script>
💡 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.
See the documentation site for details.
A sponsorship 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.
If you benefit from this project, please consider lending your support and encouraging future efforts by becoming a sponsor.
Thank you! 🙏🏻
This project is licensed under the MIT License. See the LICENSE for details.
Copyright (c) John Hildenbiddle (@jhildenbiddle)
FAQs
Determine the maximum area, height, width, and custom dimensions of an HTML canvas element.
The npm package canvas-size receives a total of 31,952 weekly downloads. As such, canvas-size popularity was classified as popular.
We found that canvas-size demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
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.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.