jhildenbiddle / canvas-size Goto Github PK

This was end-user reported. I was able to reproduce on browserstack with the sandbox below. This works in other Chrome browsers, so could be a Chrome bug. I reported it to Chrome as well.

https://codesandbox.io/s/hopeful-dan-0mmr2?file=/src/App.js

1. Thank you for this library - it's 100% needed.
2. My apologies in advance if this log is annoying - just figured you'd wanna know. Read through as much as I possibly could in the readme, plus related issues...

This is consistently crashing the Chrome Browser for me on Android Browserstack Pixel 4/5. This was first reported by users in production, so I know it's not just a VM limitation that was outlined in your very helpful readme.

For reference - using it as recommended in the readme as well..

const canvasLimitation = await canvasSize.maxArea({
      usePromise: true,
      useWorker: false,
    });

to reproduce if you'd like you can actually just fire up one of those devices in browserstack and go to your test url.

https://jsbin.com/megedep/1/edit?js,output

I've had it log the failure in the console and crash the browser.

Happy to help debug if you'd like.

Hello,
Here is what the demo gives on my firefox:

However, the max area supported on this firefox is 11181 x 11181

I think there is an issue with the order in which values are specified in the tests:
https://github.com/jhildenbiddle/canvas-size/blob/master/src/test-sizes.js#L11-L15

canvasSize.maxArea({
  useWorker: true,
  onError(width, height, benchmark) {
    console.log('Error', width, height, benchmark);
  },
  onSuccess(width, height, benchmark) {
    console.log('Success', width, height, benchmark);
  }
});

Using the webworker option as documented ends up throwing the error specified above.

This is a question, assuming it's my lack of understanding and not a bug, really not sure.

I have a completed t-shirt designer application that relies on drawing a large canvas in memory to render a design created by the user. When I encountered issues on mobile devices, I turned to this repo as a solution to warn the user that the tool is unavailable on their device. Thanks!

Unexpectedly, my fix to disable my site on mobile using the canvas test also broke Safari for desktop Macs. The result of calling test({ width: 4189, height: 4790.8 }) is false, but when I query for the maxArea(), the result I get on success has width and height 8192. Why would the test be failing even though the dimensions are within the bounds?

To unblock my progress I am switching to a solution that checks the result of maxArea() but I am concerned that this might not reflect what will happen when I try to render the design.

Not sure about other combinations, but it seems that Chrome allows canvas of size 65535x1 nowadays.

This can be currently detected by manually passing this dimension to the canvasSize.test method, but isn't detected by canvasSize.maxWidth (it still returns 32767x1).

This library does not clean out the memory it's using. Before Chrome uses 116mb, after calling

canvasSize.maxArea({
        onError: (width, height) => {
            console.warn('canvas.maxArea Error:', width, height);
        },
        onSuccess: (width, height) => {
            console.log('canvas.maxArea - width: ' + width.toLocaleString() +
                'px, height: ' + height.toLocaleString() + 'px');
        }
    });

Chrome now uses 1.1GB and does not release that additional 1GB (!).

Running the following code on Safari for iOS (15+) will cause the browser to report errors:

  try {
    const test1 = await canvasSize.maxWidth({ usePromise: true })
    console.log('MaxWidth:', test1.width)
    const test2 = await canvasSize.maxHeight({ usePromise: true })
    console.log('MaxHeight:', test2.height)
    const test3 = await canvasSize.maxArea({ usePromise: true })
    console.log('MaxArea:', test3.width, test3.height)
  } catch (err) {
    console.error('Failed to measure canvas size:', err)
  }

After some research, it seems like we have to "release" the canvas element created for testing immediately after the test is finished, to prevent the browser from holding the memory allocated for the canvas' storage. This affects not only all following canvas tests, but also real canvas applications that load afterwards, as long as they share the same memory usage constraint.

FYI: https://pqina.nl/blog/total-canvas-memory-use-exceeds-the-maximum-limit

Hi, I have a few questions about how the testing process works

1. It is noted that "Some browsers become unresponsive during tests" during the process. Is there a general sense of which browsers suffer about how much delay?
2. In the test, we copy a pixel from one canvas to another, then read the second canvas. I guess just reading a pixel from the first pixel would not be accurate enough of a test for some reason?

Hi, first thanks for your work.

I just tried it, and if I specify in webpack.config.js :

module.exports = {
    optimization: {
        minimize: true,
        minimizer: [new TerserPlugin(),
    },
...

This error is thrown :

Uncaught ReferenceError: canvasTest is not defined
    at onmessage (d6ce07e3-5a07-454b-9558-b3c8698cbe7a:4)

I just test this code :

canvasSize.maxArea({
    usePromise: true,
    useWorker : true,
})
    .then(({ width, height, benchmark }) => {
        console.log(`Success: ${width} x ${height} (${benchmark} ms)`);
    })
    .catch(({ width, height, benchmark }) => {
        console.log(`Error: ${width} x ${height} (${benchmark} ms)`);
    });

Did I miss something ?

Best regards