HTML5 Canvas Scrambles on Firefox for Android
Good day Everybody. I hope that this is the proper channel to ask this. I am using firefox as an application platform (The application is built with PHP). A part of the application is a signature pad designed with HTML5 canvas. The pad is based on the code available here: http://www.zetakey.com/codesample-signature.php
For testing I have used an iPad with iOS 6 and Safari renders the signature pad correctly. I have tried the same on a HUAWEI mediapad 10 using firefox and the canvas itself scrambles. This is not an issue when the same is loaded on google chrome using the same tablet.
The specs of the device and firefox version are as follows: OS: Android 4.1.2 Kernel Version: 3.0.8 Firefox Version: 29.0.1
The signature pad on firefox is rendered as follows: http://i.stack.imgur.com/EGaao.jpg
The signature pad on chrome is rendered as follows: http://i.stack.imgur.com/y38Vs.jpg
While an obvious solution would be shifting to chrome, there are some elements on the design that require some features that are only available on Firefox for android since it behaves as a full fledged browser. My question is: since the code is working on chrome and on safari there are no issues with it from my point of view, is this a bug on Firefox, or am I missing something?
The code and a fiddle can be viewed here:
Any Thoughts?
Modified
All Replies (1)
Looks to be a device specific issue. The jsfiddle works fine on a Nexus S, Nexus 4, Nexus 5, Galaxy S4, and a LG Optimus Net Dual.
Filing a bug at https://bugzilla.mozilla.org/enter_bug.cgi?product=Firefox%20for%20Android&component=Graphics,%20Panning%20and%20Zooming would be good. Though I don't think we have a HUAWEI mediapad 10 in our device library.
Modified