Phone Android HTML5 Hardware Acceleration - Canvas

Question

I am having a strange issue. When I have hardware acceleration enabled, if I am drawing to a canvas element, whatever is drawn on the canvas, will be re-drawn to the top of

Answer 1

Ok so I've come up with the HACKIEST solution ever. After my onTouchEnd event has fired, I must 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 bug disappears... ridicolous.

I had to get it to work, after removing hardware accel I noticed how clunky jQM feels

Answer 2

I have fixed the issue 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 ...
}

Answer 3

The duplicated HTML5 canvas issue in Android has emeerged with version 4.1.1 and it's not fixed in the latest 4.2 yet.

The solution is that none of the parents HTML elements to the canvas will have overflow:hidden or overflow:scroll

Answer 4

I'm using Segment Display library and it is also affected by this problem. After long discussion with lib's author, he came out with a quick workaround. He told me to add these two lines:

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

right after this line:

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

Solution was tested and works like a charm.

From a quick analysis of given code I assume that a transparent (clearRect) canvas is causing these problems and changing it to non-transparent one (fillRect) fixes the bug.

Answer 5

For anyone interested, Android 5 is working amazing, canvas works at much better speeds.

Answer 6

I had the same problem. Seems to be caused by jquery mobile css in my case.

Going into a little more detail 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; padding: 15px; }

to

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

Removing the overflow-x: hidden attribute fixes the problem.

Source: Github / thomasjbradley / signature-pad / Issues

Edit: Strangely enough, I noticed the problem didn't occur when the canvas width was 256px width or less.