Android poor performance on bigger canvas with images

[alexgeofilter]

Version

2.4.0

Test Case

http://fabricjs.com/

Information about environment

Nodejs or browser? Which browsers?

Android (Chrome and Firefox)

Steps to reproduce

Make a canvas around 1920x1080 with some image and text elements. Drag any element.

Expected Behavior

Smooth drag as seen on iOS or desktop browsers.

Actual Behavior

Moving canvas elements results in 1-3 frames per second performance. You can notice this exact case with the fabricjs home page example. This issue seems related to the way android browsers render the canvas and its elements. Less powerful iphones have no issue with canvas frame rate so it doesn't look like an issue specific to the complexity of the canvas.

[asturur]

What is the real size of the canvas on both devices? what is the retina scaling level of the iphone you are testing and that of the android phone? What android phone is? Did you enable or disable retina scaling?

[alexgeofilter]

The canvas on device is about 80-90% of the original 2340x1080 canvas size. The scaling level on device is the default and there was no retina scaling enabled on the fabric side. So far I've tested this on 4 devices to get a feel for the issue.

On the android side, I've tested:

OnePlus 5T - 2,160 x 1,080 Pixel 2 - 2880 x 1440

iOS:

iPhone 7 - 1,334 x 750 iPhone Xs max - 2,436 x 1,125

The 5T and Pixel 2 looks the same performance wise on both my project and the fabric home page. The iPhones were 100% smooth on both tests. It may have something to do with the way the canvas is rendered by the browser? On a lower resolution canvas with the same elements, the performance is a little bit better but still has some noticeable lag. On my 2340x1080 canvas, a single text element present will still have a noticeably low frame rate when dragging.

[asturur]

did you specifically disabled retina scaling on fabric? or you get it by default. The scaling would be also up to 3x on some devices, and that would end up with a 7000x3240 pixel canvas.

I also noticed that my gf iphone X is super smooth and my OP2 does like 2 fps. But not on everything. I m not sure if is lack of 2d acceleration on some android + browser combination or what.

[alexgeofilter]

Retina scaling was true by default, however I did turn it off and did not notice a difference. That's definitely the same issue as I'm describing. The main factor seems to be resolution of the canvas since the test examples on the website are smooth on my device. Test examples have small canvases that do not lag even with a huge number of objects present. The issue is present on both chrome and firefox so it seems to be linked to the way renderAll is being processed by the browser or OS. Looks like 2d acceleration is supported on these browsers but may not be supported by the drawing/rendering method used?

I recently made an in-browser 3D webGL application with a lot of graphical rendering and my 5T could run it at 60 FPS so this is really interesting considering both are rendered on the canvas element.

[asturur]

webgl is way different from 2d canvas, they use the same html element to appear on the browser but the context and drawing calls use different hardware completely and different software too.

I would still be interested in a fiddle loadable from my phone to reproduce the problem

[alexgeofilter]

Turned out I was setting retina scaling after the canvas initialization. Setting it as an option direction in the canvas init works perfectly.

[asturur]

should be noted in docs that this must be changed at init time or at least before a resize.