For Android Versions lower than 4.4, you can't use SVG for masking. Attempting to do so results in a solid block of color.

For Android 4.4 and higher, the problem is solved, due to the new system browser.

Although it doesn't affect us greatly since we target Android 4.x in this book, it's still worth noting that Android 2.x doesn't apply anti-aliasing to rounded corners. This means they look horrible when compared to other platforms and operating system versions. Thankfully the problem was resolved in later versions, but 2.x still consumes a large portion of the market. If you're targeting those devices, it's worth recognizing.

It just so happens that if you run our game in Project 11, Canvas Games and the Accelerometer, and Project 12, Building a Backend – Working with Parse, on these particular versions of Android, you'll encounter the situation where the very first frame of the game is persisted underneath the actual game, even though we execute a clearRect on the canvas. We were unable to eliminate this artifact on our device (2012 Nexus 7), but you might have more luck with some of these potential fixes:

If you run our game in Project 11, Canvas Games and the Accelerometer, and Project 12, Building a Backend – Working with Parse, on these particular versions of Android, you'll also encounter this issue. The title of the game animates correctly, but the non-animated version is also visible. Some of the fixes in the previous section work—the fix that worked immediately for us was to ensure overflow: visible on all parent elements. (Of course, this may result in other issues, such as scrolling of views that wasn't intended.)

When Android 4.4 (KitKat) was released, great rejoicing occurred because the system web view was finally backed by Chromium. The hope was that this would alleviate a lot of the quirks of the old system web view (which was horribly out of date and broken in many places). Unfortunately, Google broke the Canvas element. Essentially it is not accelerated at all, and as such, it is next to useless for games that require anything more than about 4 or 5 frames per second.

There is, unfortunately, no fix. Google is aware of the issue, and hopefully, the problem will be fixed in a future Android release. You might have luck with Project Crosswalk (https://crosswalk-project.org). It can supply a hardware accelerated canvas to your Cordova app that should have much improved performance.

Android Versions prior to 4.4 don't natively support easy creation of Blobs. You can use a polyfill that will provide this support without having to make changes to the rest of your code as shown in the following code snippet:

// Copyright (c) 2013 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

// modification by KS for PhoneGap Hotshot
try {
  new Blob([]);
} catch (e) {
  var nativeBlob = window.Blob;
  var newBlob = function(parts, options) {
    if (window.WebKitBlobBuilder) {
      var bb = new WebKitBlobBuilder();
      if (parts && parts.length) {
        for (var i=0; i < parts.length; i++) {
          bb.append(parts[i]);
        }
      }
      if (options && options.type) {
        return bb.getBlob(options.type);
      }
      return bb.getBlob();
    }
  
  newBlob.prototype = nativeBlob.prototype;
  window.Blob = newBlob; // clobber the global
}

Some companies have decided to theme their flavor of Android, and this can occasionally cause problems. Older HTC devices tend to be a big problem: HTC re-themed the input boxes that the web view generates and then preceded to ignore any CSS applied. This often results in horrible renderings on these devices.

And there's no fix if you encounter a device with this problem. The only fix is to flash a new ROM that does away with HTC's theming, and most users simply aren't going to do that.