canvas-size
Advanced tools
Determine the maximum size of an HTML canvas element and support for custom canvas dimensions.
Determine the maximum size of an HTML canvas element and support for custom canvas dimensions.
The HTML canvas element is widely supported by modern and legacy browsers, but each browser and platform combination imposes unique size limitations 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.
NPM:
npm install canvas-size
Git:
git clone https://github.com/jhildenbiddle/canvas-size.git
CDN (unpkg.com shown, also on jsdelivr.net):
// ES5
<script src="https://unpkg.com/canvas-size@1"></script>
// ES6 Module
<script type="module">
import canvasSize from 'https://unpkg.com/canvas-size@1/dist/canvas-size.esm.min.js';
// Do stuff...
</script>
Determines the maximum area/height/width of an HTML canvas element on the client.
When options.max is unspecified, an optimized test will be performed using known maximum area/height/width values from previously tested browsers and platforms (see Test Results for details). This will return the maximum canvas area/height/width for all major browsers in the shortest amount of time.
When options.max is specified, the value will be used for the initial area/height/width test, then reduced by the options.step value for each subsequent test until a successful test pass. This is useful for determining the maximum area/height/width of a canvas element for browser/platform combination not listed in the Test Results section. Note that lower options.step values will provide more accurate results, but will require more time to complete due the increased number of tests that will run.
Options
numbernumber1number1024function1 for maxHeight())1 for maxWidth())function1 for maxHeight())1 for maxWidth())Examples
The following examples use canvasSize.maxArea(). Usage for maxHeight() and maxWidth() is identical.
// Default (optimized sizes)
canvasSize.maxArea({
onError: function(width, height) {
console.log('Error:', width, height);
},
onSuccess: function(width, height) {
console.log('Success:', width, height);
}
});
// Custom sizes
canvasSize.maxArea({
max : 16384,
min : 1, // default
step: 1024, // default
onError: function(width, height) {
// 1: 16384,16384 (max)
// 2: 15360,15360 (max - 1024)
// 3: 14336,14336 (max - 2048)
console.log('Error:', width, height);
},
onSuccess: function(width, height) {
// 4: 13312,13312 (max - 3072)
console.log('Success:', width, height);
}
});
Determines if the dimension(s) specified exceed the HTML canvas size limitations of the browser.
To test a single dimension, use options.width and options.height. Callbacks are ignored when testing a single dimension, and a boolean is returned to indicate if the dimensions are within the browser's size limitations.
To test multiple dimensions, use options.sizes to provide an array of [width, height] combinations to be tested (see example below). Callbacks are invoked after each test.
Options
numbernumberarray (see examples below)functionfunctionReturns
boolean when testing single dimension using options.width and options.height. Returns true if the dimensions are within the browser's size limitations or false when exceeded.Examples
// Single dimension
var result = canvasSize.test({
height: 16384,
width : 16384
});
console.log(result); // true/false
// Multiple dimensions
canvasSize.test({
sizes: [
[16384, 16384],
[8192, 8192],
[4096, 4096]
],
onError: function(width, height) {
// 1: 16384,16384
// 2: 8192,8192
console.log('Error:', width, height);
},
onSuccess: function(width, height) {
// 3: 4096,4096
console.log('Success:', width, height);
}
});
| Browser (OS) | Max Width | Max Height | Max Area (Test Size) |
|---|---|---|---|
| Chrome 70 (Mac, Win*) | 32,767 | 32,767 | 268,435,456 (16,384 x 16,384) |
| Edge 17 * | 16,384 | 16,384 | 268,435,456 (16,384 x 16,384) |
| Firefox 63 (Mac, Win *) | 32,767 | 32,767 | 124,992,400 (11,180 x 11,180) |
| IE 11 * | 16,384 | 16,384 | 67,108,864 (8,192 x 8,192) |
| IE 9 - 10 * | 8,192 | 8,192 | 67,108,864 (8,192 x 8,192) |
| Safari 7 - 12 | 4,194,303 | 8,388,607 | 268,435,456 (16,384 x 16,384) |
* Tests conducted using BrowserStack virtualized device. Results from actual hardware may vary.
| Browser (OS) | Max Width | Max Height | Max Area (Test Size) |
|---|---|---|---|
| Chrome 68 (Android 9) * | 32,767 | 32,767 | 201,299,344 (14,188 x 14,188) |
| Chrome 68 (Android 7.1 - 8) * | 32,767 | 32,767 | 201,299,344 (14,188 x 14,188) |
| Chrome 68 (Android 6) | 32,767 | 32,767 | 117,418,896 (10,836 x 10,836) |
| Chrome 68 (Android 5) * | 32,767 | 32,767 | 130,005,604 (11,402 x 11,402) |
| Chrome 68 (Android 4.4) * | 32,767 | 32,767 | 268,435,456 (16,384 x 16,384) |
| IE (Windows Phone 8.x) | 4,096 | 4,096 | 16,777,216 (4,096 x 4,096) |
| Safari (iOS 9 - 12) | 4,194,303 | 8,388,607 | 16,777,216 (4,096 x 4,096) |
* Tests conducted using BrowserStack virtualized device. Results from actual hardware may vary.
Some browsers become unresponsive during tests
This is a result of the single-threaded nature of JavaScript and the time required to read data from large HTML canvas elements on the client.
If/when support for OffscreenCanvas is added to the library, this will no longer be an issue for modern browsers as all canvas work will be handled by a Service Worker on a separate thread. Until then, consider the following options:
Virtual environments may produce inconsistent results
Tests conducted on virtual machines may produce results that differ from actual hardware. This is to be expected, as the virtualized hardware used in these environments can impose its own unique size limitations.
In some virtualized environments (mostly with older browsers and operating systems), canvas-size may produce inconsistent results or fail all tests when calling maxArea(), maxHeight(), maxWidth(), and test() using options.sizes. This is a result of the virtual GPU failing after a test canvas exceeds the browser's size limitations, causing all subsequent tests to fail even for canvas dimensions that are actually supported by the browser. In these scenarios, avoid iterating over canvas dimensions that exceed the browser's size limitations, and instead specify dimensions that are known to be supported by the browser. Supported dimensions can be detected manually by calling test() using options.width and options.height.
This project is licensed under the MIT License. See the MIT LICENSE for details.
Copyright (c) 2018 John Hildenbiddle (@jhildenbiddle)
1.0.0
2018-12-06
FAQs
Determine the maximum area, height, width, and custom dimensions of an HTML canvas element.
The npm package canvas-size receives a total of 30,243 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.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.
Security News
ENISA’s 2024 report highlights the EU’s top cybersecurity threats, including rising DDoS attacks, ransomware, supply chain vulnerabilities, and weaponized AI.
Security News
NIST's new password guidelines remove periodic changes and special character requirements, focusing on longer, more secure passwords for better authentication practices.