2

I have a kids web application for colouring butterflies, which uses a clipping path to set the boundary of the painting area.

The application works fine on desktop browsers, Opera Mobile and iOS devices, but the Android default browser seems to treat the clipping area as empty, preventing any subsequent canvas actions from taking effect.

You can find the source code here:

http://svn.apache.org/viewvc/incubator/wookie/trunk/widgets/butterfly/

However the main actions are:

context.beginPath();
(lots of context.bezierCurveTo statements to draw a butterfly shape)
context.closePath(); 
context.stroke();
context.fillStyle = "rgb(255,255,255)";
context.fill();  
context.clip();

I've tried changing the order around, e.g. clipping before trying to stroke or fill the shape, but in that case on Android it doesn't actually draw anything - again its treating the clipping path as empty.

Any ideas? Is it me, or is there an undocumented limitation in the Android webview on clipping paths?

Scott Wilson
  • 1,650
  • 1
  • 17
  • 14
  • Android implementation is generally crap, so I wouldn't be suprised if you hit bugs like this. – Mikko Ohtamaa Oct 22 '11 at 13:07
  • I've added an issue to the Android tracker for this - quite a few canvas demos don't work properly on the Android Browser: http://code.google.com/p/android/issues/detail?id=21099 – Scott Wilson Nov 11 '11 at 14:31

1 Answers1

0

This still does not work on the android browser but does work on Google Chrome for Android.

Here is a test page you can use to see: http://jsfiddle.net/LEpA5/

I suspect that the regular android browser will be deprecated in the near future in favor of Google Chrome. I wouldn't hold my breath on this getting fixed because of that.

Simon Sarris
  • 62,212
  • 13
  • 141
  • 171