OffscreenCanvas is not functional in Cordova Android, but functional in Chrome Mobile.

[d410]

Bug Report

OffscreenCanvas is an interface that allows drawing access to a HTMLCanvasElement without being tied to the DOM (Or document object). It is much different than a canvas created with document.createElement("canvas') as OffscreenCanvas does not require the document object to be created. This lets you use it as a Canvas without requiring synchronization to the DOM, and you can use it as a way of using Canvas within Web Workers.

Many industry standard Javascript graphics libraries like three.js use OffscreenCanvas. It is essential for gaming.

https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas

Problem

1. The OffscreenCanvas performs its drawing and updating on Chrome for Windows, Chrome for Android, but not Android Webview. It does not update or display the OffscreenCanvas on Cordova for Android, using the Android Webview.

2. The OffscreenCanvas used within a WebWorker performs drawing and updating to OffscreenCanvas on Chrome for Desktop and Chrome for Android, but not for a Cordova Application. It does not update or display the OffscreenCanvas on Cordova for Android, using the Android Webview.

Here is a phone recording of the problem, recorded for us by an actual Chromium developer.

https://00e9e64bace5b7ee4e0dbed1bceba2026aaa8dca45bf9dbde5-apidata.googleusercontent.com/download/storage/v1/b/monorail-prod.appspot.com/o/16%2Fattachments%2F8468771f-7ef5-44d0-94c1-2ab10af058ea?qk=AD5uMEsRuvexxSqv_LM5M_6wxtvOwAmU_St1pAxR2asQhD5elpXPC4W4qYZWKSBGHsVqTlz2wxB64UNXe72yccnCG2eUU5diqLWvM3_zJGg5lkJiPbGJ9rrohIe_c7w3ma1bN1OLOJZjCrbarMtrlIAFGl312vUfrPyiFMPQEyx8rYj6TYroroGGYpEGv3BvxyuaaXMfLmjIvHdSCphLBUPmo2KqqbkInE1Bj9cw3Bz5oVdhiOC6kzqzJ-KD0Dp5fQbYw3d5Ut0LZp7htpZdib3IM8zzhrPIh2zpCaaFV3yHs0tT6eUH2_Dy7u2t_em5A3q9tgBiTNNaGrabzv9wP9G8Z14EzcCTU-CJjDMDDsES8uYD-_0pFslEkPAtupJkcfabOkKpeWxD1AUzJf1OBJWXWntxOGaFZBrJahxcPNhXCnJZyk7gCDilBocpe1oqH6Fwe1XVy9QA7578Y4hpCozH-XOHZnwbHRngimHKESr-mkiXPt7KI52uqWd3CzJqaB3d4Q4S_272R7Ige70pDBw8XaQuWfP3iqYlMcGgtGxKbGm5hhiRG8o93rYv6d1dyKIucyDqzXossLtCqWCg0QiHQilzPzo46oAKlOzXfPxde9Ty_2KyuFwUVLZJNRUorDBNKQh0d6sRnYyRWmg_4pheEslx0RDlxc9S-44aZqx-LWj3p2xPbzhMnbLRAjvR2357anYWieVmjbG5GpYrstqyi_g8hmZpgBdmS24uBT8pIn0Ctbe7RGJCK4rLaSlGcVGV6dW9CT0KaFyecHbzQ4miRctiWYyjFHZeMlTSBew1mihm9TbkZi-PfO6vEnoc4Zdm8yu94MSRRotP9Ldph1E5Oyj9i1-VTjQFz_wn28A5uHXeIuY_Qp4

What is expected to happen?

In the attached samples, the user should be able to view a red rectangle within a blue rectangle. The first example uses OffscreenCanvas within the main thread. The second uses OffscreenCanvas within a worker thread. On Chrome Mobile v 73, both examples function correctly. On a Cordova Android application featuring the same code as in the examples, nothing displays.

What does actually happen?

Nothing Displays in a Cordova Android Application in either example.

Information

Unit testing cannot be performed since this is an issue involving the Canvas API. However, the below code examples demonstrate the code that does not work on Cordova Android.

Command or Code

Single-threaded Attached is the code for drawing to a canvas with OffscreenCanvas and Canvas2D API. https://pastebin.com/PUC48kgk

Multi-threaded Attached is the code for drawing to a canvas with OffscreenCanvas and Canvas2D API. https://pastebin.com/jfCsbBW3

Environment, Platform, Device

Have tested Cordova Android application on a battery of Android capable Phones. TCL LX LG K7 LG Aristo LG Tribute Dynasty All using Chrome Mobile v 73.

Version information

I am using no plugins. Have tried on Cordova as a NPM package 6.x, 7.x, and 8.x, and Cordova 9.

Checklist

• [x] I searched for existing GitHub issues
• [x] I updated all Cordova tooling to most recent version
• [x] I included all the necessary information above

[janpio]

Does the Android WebView support this in any way? If not, there is nothing Cordova Android can do about that.

[d410]

The current Android Webview is based on Chrome Stable. The Webview should be feature equivalent to Chrome Mobile. Please correct me if I've been misinformed.

[d410]

I have continued my research into this issue.

Here is the status of OffscreenCanvas in Chromium. It is supported by all Chrome variants and the Android Browser. https://www.chromestatus.com/feature/5681560598609920

Here is the status on caniuse.com which gives further weight to its support and compatibility. https://caniuse.com/#feat=offscreencanvas

Here is a StackOverflow question I have opened on this issue: https://stackoverflow.com/questions/55668046/offscreencanvas-works-on-chrome-mobile-but-refuses-to-work-in-mobile-application

[janpio]

It would be nice if caniuse.com would include the iOS and Android WebViews :/ UC Browser for Android or Samsung Internet are probably the more relevant comparisons in this case, as they also use the Android Webview as far as I know - and they are deep red.

Have a look at this: https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas#Browser_compatibility Has a flag for "Android WebView":

This feature is behind the Experimental canvas features preference.

[d410]

Ok. While some of the other browsers use Webview, some of the alternative web browsers use Crosswalk, which uses older versions of Chrome Mobile as a result. This can remove the feature compatibility with Chrome Stable. The listing of the Android Browser at caniuse points to the Android Webview (Android 5-6.x Webview Chrome 67) is green. This makes it difficult to pinpoint the issue as either a Cordova or a Chrome issue.

Thank you, another team member has submitted a issue to Chromium for us. We want to trace this down to a Chromium issue, or a Cordova issue. Thank you for your continued patience. You can view it here.

https://bugs.chromium.org/p/chromium/issues/detail?id=952617&can=2&start=0&num=100&q=&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Component%20Status%20Owner%20Summary%20OS%20Modified&groupby=&sort=

[janpio]

Did you enable the Experimental canvas features preference mentioned?

[d410]

Doing research led us to find that this flag is hidden behind Experimental Web Platform Features flag. https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/14WpfTddUDI

However, enabling this does not display the OffscreenCanvas correctly.

Unfortunate for us, this does not work for the Android Browser (Chrome Webview)

[d410]

https://stackoverflow.com/questions/20994625/enable-experimental-features-in-android-chrome-webview-aim-css-regions-suppor/21009181#21009181

Would anyone even know how to launch a Cordova Webview with flags set? I assume I'm doing it the correct way of visiting chrome://flags in the browser, but I'm unsure if there's a way to enable it via the Cordova project structure

[janpio]

Best open a new issue about that.

[d410]

As of 4/15/19, this bug has been reported to Chromium and is being resolved.

https://bugs.chromium.org/p/chromium/issues/detail?id=952617&can=2&start=0&num=100&q=&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Component%20Status%20Owner%20Summary%20OS%20Modified&groupby=&sort=

I will start a new thread about running Cordova's Android Webview with flags set. I hope it is possible.

Following up: It seems that this is an issue that automated feature testing can't detect. https://bugs.chromium.org/p/chromium/issues/detail?id=940953

The caniuse articles will list it as a working feature mainly because the browser does not throw any errors, but the actuality is that this feature and related ones do not display OffscreenCanvas.

The issue needs the attention of Chromium's developers to switch the Webview to use their new rendering framework, Viz, which supports OffscreenCanvas, which is the current rendering framework Chrome Mobile uses. It seems that they are still actively working on this and may not immediately make progress on it.

Expect the OffscreenCanvas api to change in the meantime... :( It seems that they aren't happy with it and keep removing or changing functionality...

[dpogue]

It looks like this is an Android WebView bug, and not a Cordova bug, and it's been reported upstream.

Going to close this because there's nothing we can do on the Cordova side about it.