Android HTML5 Hardware Hardware Acceleration - Canvas

Question

I have a strange problem. When I turn on hardware acceleration, if I draw a canvas element, everything that is drawn on the canvas will be redrawn at the top of the page.

If I turn off hardware acceleration, this problem does not occur.

I only personally tested it on Android 4.1.1, but earlier I noticed this problem with one of our users that I could not replicate (they were on Android 3+ at least)

I cannot capture the screenshot exactly (not too sure how to do it on Android), but I will try to break the process.

hardware accelerated

• The user fills in the usual details.
• the user scrolls the bottom of the page, extends the signature element on the canvas.
• If the user has forgotten something at the top of the page and scrolls to the top of the page
• A visual error occurs, the signature they draw appears at the top of the page.

However, without hardware acceleration, step 4 does not occur. Is there something I have to do for an HTML5 canvas?

I'm not sure what information I need to convey here - it looks like Samsung, HTC and Google Nexus Phones / tablets, so this is not an easy mistake.

I tried searching, but I always get game development threads, etc.

I really would like Hardware Accel to be turned on, this is the only problem that arises because of this - performance gains become incredibly incredible

Answer 1

A duplicate issue with HTML5 canvas in Android appeared in version 4.1.1, and it has not yet been fixed in the latest version 4.2.

The solution is that none of the elements of the parent's HTML elements on the canvas will have overflow: hidden or overflow: scroll

Answer 2

Ok, so I came up with a HACKIEST solution. After my onTouchEnd event fired, I have to do the following

1. Append changes to the canvas. It'll double-draw 2. Create a clone of the canvas 3. remove the canvas, re-add it 4. Copy the data from the clone over 

then the error disappears ... funny.

I had to get it working, after removing hardware acceleration, I noticed how awkward jQM feels

Answer 3

I had the same problem. It seems to be related to jQuery mobile css in my case.

Going a bit more to what guya added, go to the jquery.mobile.structure.css file and change this line:

.ui-content {border-width: 0; overflow: visible; overflow-x: hidden; upholstery: 15px; }

to

.ui-content {border-width: 0; overflow: visible; upholstery: 15px; }

Overflow-x Removal: A hidden attribute resolves the issue.

Source: Github / thomasjbradley / signature-pad / Issues

Edit: Oddly enough, I noticed that the problem did not occur when the canvas width was 256 pixels wide or less.

Answer 4

For anyone interested, Android 5 works amazingly, the canvas runs at much higher speeds.

Answer 5

I am using a segment display and it is also affected by this problem. After a long discussion with the author of lib, he came up with a quick workaround. He told me to add these two lines:

 context.fillStyle = '#fff'; context.fillRect(0, 0, display.width, display.height); 

immediately after this line:

 // clear canvas context.clearRect(0, 0, display.width, display.height); 

The solution has been tested and works like a charm.

From a quick analysis of this code, I assume that a transparent ( clearRect ) canvas causes these problems and changes it to opaque ( fillRect ) corrects the error.

Answer 6

I fixed the problem when creating the view:

 if (Build.VERSION.SDK_INT >= 16) { try { Method method = root.getClass().getMethod("setLayerType", int.class, Paint.class); method.invoke(root, 0x01/* View.LAYER_TYPE_SOFTWARE */, null); Log.d(TAG, "hardware accelaration disabled"); } catch ... }