Maximum size of a element

Question

I\'m working with a canvas element with a height of 600 to 1000 pixels and a width of several tens or hundreds of thousands of pixels. However, aft

Answer 1

Update for 2018:

As time marches on, canvas limitations have changed. Sadly, what hasn't changed is the fact that browser's still do not provide information on canvas size limitations through the Canvas API.

For those looking to programmatically determine the browser's max canvas size or test support for custom canvas dimensions, check out canvas-size.

• GitHub: https://github.com/jhildenbiddle/canvas-size
• NPM: https://www.npmjs.com/package/canvas-size

From the docs:

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.

A demo link and test results are available in the README, as well as a known issues section which touches on performance and virtual machine considerations.

Full disclosure, I am the author of the library. I created it back in 2014 and recently revisited the code for a new canvas-related project. I was surprised to find the same lack of available tools for detecting canvas size limitations in 2018 so I updated code, released it, and hope it helps others running into similar issues.