Android WebView with layer_type_software not showing HTML5 canvas content

Question

Since last update of Android WebView a web page with a HTML5 canvas is not displayed correctly when hardware acceleration is disabled by setting the WebView's layer type to View.LAYER_TYPE_SOFTWARE. Is there a workaround for this problem?

When I leave out the following line of Java code: webView.setLayerType(View.LAYER_TYPE_SOFTWARE, null); Then the Content is displayed correctly.

Java code:

WebView webView = findViewById(R.id.webView);
webView.getSettings().setJavaScriptEnabled(true);
webView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
webView.loadUrl("file:///android_asset/Gradient.html");

Html file test.html:

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80);
</script>
</body>
</html>

Expected result: Red linear gradient in black border https://heiri-web.ch/Gradient.png

Actual result: Empty black border https://heiri-web.ch/Empty.png

Nikaido · Accepted Answer · 2019-09-27 12:01:36Z

2

After submitting a bug report https://issuetracker.google.com/issues/139276381 to Google I received the reply that the bug will not be fixed as LAYER_TYPE_SOFTWARE is obsolete. Because I needed LAYER_TYPE_SOFTWARE to get a complete screenshot (including HTML5 canvas content) using WebView.getDrawingCache() I asked for an alternative method.

Following the advice of Bo Liu, member of the WebView developers team, I managed to get a complete screenshot of a WebView without using LAYER_TYPE_SOFTWARE: Create an ImageReader, use ImageReader.getSurface() to get a Surface, create a VirtualDisplay on the Surface, use VirtualDisplay.getDisplay() to get a Display, create a Presentation with the WebView in its layout on the Display, use Presentation.show(), use ImageReader.acquireLatestImage() to read the rendered Image of WebView content.

edited Sep 27, 2019 at 12:01

Nikaido

4,6675 gold badges37 silver badges51 bronze badges

answered Sep 27, 2019 at 10:18

heiri

531 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Bhargav Rao · Accepted Answer · 2019-08-31 16:09:03Z

I found that the key to solving the HTML5 canvas issue in Android webview is within AndroidManifest.xml. What did I have to do? I kept the strategy of using a hybrid (custom) webview, because as I develop in Xamarin Forms for both iOS and Android, I needed the same solution on both platforms. On Android I did:

// Java (or similar [laughs])
// Enable hardware acceleration using code (>= level 19)
if (Build.VERSION.SDK_INT >= 19) {
    yourWebviewObj.setLayerType(View.LAYER_TYPE_HARDWARE, null);
} else {
    yourWebviewObj.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
}

yourSettingsObj.setRenderPriority(WebSettings.RenderPriority.HIGH);
yourSettingsObj.setCacheMode(WebSettings.LOAD_NO_CACHE);

// Xamarin for Android
// Enable hardware acceleration using code (>= level 19)
if (Build.VERSION.SdkInt >= 19)
{
    yourWebviewObj.SetLayerType (LayerType.Hardware, null);
}
else
{
    yourWebviewObj.SetLayerType (LayerType.Software, null);
}

yourWebviewObj.Settings.SetRenderPriority(WebSettings.RenderPriority.High);
yourWebviewObj.Settings.CacheMode = CacheModes.NoCache;

And finally, within AndroidManifest.xml find for android:handwareAccelerated="false" and you can change the value from false to true. This tip (additionally) works for both the Java universe and Xamarin.

Collectives™ on Stack Overflow

Android WebView with layer_type_software not showing HTML5 canvas content

Java code:

Html file test.html:

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Java code:

Html file test.html:

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related