Fixes issue where Pixi CanvasTint didn't allow for browsers that bit-shift the alpha value on putImageData (Android Stock Browser, I'm looking at you!)

Author: photonstorm

src/pixi/renderers/canvas/utils/CanvasTinter.js

@@ -151,7 +151,7 @@ PIXI.CanvasTinter.tintWithOverlay = function(texture, color, canvas)
  */
 PIXI.CanvasTinter.tintWithPerPixel = function(texture, color, canvas)
 {
-    var context = canvas.getContext( "2d" );
+    var context = canvas.getContext("2d");
 
     var crop = texture.crop;
 
@@ -178,9 +178,18 @@ PIXI.CanvasTinter.tintWithPerPixel = function(texture, color, canvas)
 
     for (var i = 0; i < pixels.length; i += 4)
     {
-        pixels[i+0] *= r;
-        pixels[i+1] *= g;
-        pixels[i+2] *= b;
+      pixels[i+0] *= r;
+      pixels[i+1] *= g;
+      pixels[i+2] *= b;
+
+      if (!PIXI.CanvasTinter.canHandleAlpha)
+      {
+        var alpha = pixels[i+3];
+
+        pixels[i+0] /= 255 / alpha;
+        pixels[i+1] /= 255 / alpha;
+        pixels[i+2] /= 255 / alpha;
+      }
     }
 
     context.putImageData(pixelData, 0, 0);
@@ -206,6 +215,35 @@ PIXI.CanvasTinter.roundColor = function(color)
     return PIXI.rgb2hex(rgbValues);
 };
 
+/**
+ * Rounds the specified color according to the PIXI.CanvasTinter.cacheStepsPerColorChannel.
+ * 
+ * @method roundColor
+ * @static
+ * @param color {number} the color to round, should be a hex color
+ */
+PIXI.CanvasTinter.checkInverseAlpha = function()
+{
+    var canvas = new PIXI.CanvasBuffer(2, 1);
+
+    canvas.context.fillStyle = "rgba(10, 20, 30, 0.5)";
+
+    //  Draw a single pixel
+    canvas.context.fillRect(0, 0, 1, 1);
+
+    //  Get the color values
+    var s1 = canvas.context.getImageData(0, 0, 1, 1);
+
+    //  Plot them to x2
+    canvas.context.putImageData(s1, 1, 0);
+
+    //  Get those values
+    var s2 = canvas.context.getImageData(1, 0, 1, 1);
+
+    //  Compare and return
+    return (s2.data[0] === s1.data[0] && s2.data[1] === s1.data[1] && s2.data[2] === s1.data[2] && s2.data[3] === s1.data[3]);
+};
+
 /**
  * Number of steps which will be used as a cap when rounding colors.
  *
@@ -224,6 +262,16 @@ PIXI.CanvasTinter.cacheStepsPerColorChannel = 8;
  */
 PIXI.CanvasTinter.convertTintToImage = false;
 
+/**
+ * If the browser isn't capable of handling tinting with alpha this will be false.
+ * This property is only applicable if using tintWithPerPixel.
+ *
+ * @property canHandleAlpha
+ * @type Boolean
+ * @static
+ */
+PIXI.CanvasTinter.canHandleAlpha = PIXI.CanvasTinter.checkInverseAlpha();
+
 /**
  * Whether or not the Canvas BlendModes are supported, consequently the ability to tint using the multiply method.
  *