I am writing a data viz app that requires me to process very large 2D arrays of data and convert that data into a scaled down image for display in a canvas in the DOM.

I am bumping up against DOM canvas size limitations. My arrays can be as large as 5000 x 5000. I want to get around the canvas size limitation by using createImageBitmap() to simultaneously scale down and convert the large array to an ImageBitMap of smaller size - 256 x 256 - for insertion into an onscreen canvas.

How can I convert the raw array data into the proper format? Will this approach work?

I am writing a data viz app that requires me to process very large 2D arrays of data and convert that data into a scaled down image for display in a canvas in the DOM.

I am bumping up against DOM canvas size limitations. My arrays can be as large as 5000 x 5000. I want to get around the canvas size limitation by using createImageBitmap() to simultaneously scale down and convert the large array to an ImageBitMap of smaller size - 256 x 256 - for insertion into an onscreen canvas.

How can I convert the raw array data into the proper format? Will this approach work?

• javascript
• canvas
• imagebitmap

Share Improve this question Follow asked Sep 13, 2019 at 14:31 dugladugla 12.9k2626 gold badges9494 silver badges139139 bronze badges 4

• what is the raw data that you have in your 2D array, can you elaborate on that? – 123survesh Commented Sep 13, 2019 at 14:44
• It is a bit hard to isolate. My current approach is: 1) Draw array into OffScreenCanvas of identical size. 2) call drawImage() on the smaller destination canvas - 256 x 256 which performs both to minify and to copy. For an array large then about 4K x 4K the destination canvas is never written. No error. Below that size it works fine. – dugla Commented Sep 13, 2019 at 15:14
• You could potentially reduce the data algorithmicly, it's a bit of a step away from what you currently have, but e.g. averaging each 2x2 block of pixels down to a single pixel worth of colour would quarter the number of pixels. – DBS Commented Sep 13, 2019 at 15:25
• Yes I agree. The "proper" approach would be to downsample the array data and just hand it to the destination canvas. I am hoping to get "free" downsampling using imaging functionality rather then rolling my own, – dugla Commented Sep 13, 2019 at 15:26

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

You can create and manipulate your image before rendering it to canvas. 5000x5000 shouldn't be too large for canvas though. What limitations are you running into? Answer here covers resizing as on canvas then grabbing data.

var raw = new Uint8ClampedArray(5000*5000*4); // 4 for RBGA
var imageData = new ImageData(raw, 5000,5000);
var bitmap = createImageBitmap(imageData);