Parent matrix is applied to canvas context on each draw function

Author: bitnenfer

src/display/mask/GeometryMask.js

@@ -115,7 +115,7 @@ var GeometryMask = new Class({
 
         renderer.currentContext.save();
 
-        geometryMask.renderCanvas(renderer, geometryMask, 0.0, camera, null, true);
+        geometryMask.renderCanvas(renderer, geometryMask, 0.0, camera, undefined, null, true);
 
         renderer.currentContext.clip();
     },

src/gameobjects/bitmaptext/dynamic/DynamicBitmapTextCanvasRenderer.js

@@ -90,6 +90,12 @@ var DynamicBitmapTextCanvasRenderer = function (renderer, src, interpolationPerc
 
     ctx.save();
 
+    if (parentMatrix !== undefined)
+    {
+        var matrix = parentMatrix.matrix;
+        ctx.transform(matrix[0], matrix[1], matrix[2], matrix[3], matrix[4], matrix[5]);
+    }
+
     ctx.translate(src.x, src.y);
 
     ctx.rotate(src.rotation);

src/gameobjects/bitmaptext/static/BitmapTextCanvasRenderer.js

@@ -96,6 +96,12 @@ var BitmapTextCanvasRenderer = function (renderer, src, interpolationPercentage,
 
     ctx.save();
 
+    if (parentMatrix !== undefined)
+    {
+        var matrix = parentMatrix.matrix;
+        ctx.transform(matrix[0], matrix[1], matrix[2], matrix[3], matrix[4], matrix[5]);
+    }
+
     ctx.translate(tx, ty);
 
     ctx.rotate(src.rotation);

src/gameobjects/blitter/BlitterCanvasRenderer.js

@@ -36,6 +36,14 @@ var BlitterCanvasRenderer = function (renderer, src, interpolationPercentage, ca
     var cameraScrollX = src.x - camera.scrollX * src.scrollFactorX;
     var cameraScrollY = src.y - camera.scrollY * src.scrollFactorY;
 
+    ctx.save();
+
+    if (parentMatrix !== undefined)
+    {
+        var matrix = parentMatrix.matrix;
+        ctx.transform(matrix[0], matrix[1], matrix[2], matrix[3], matrix[4], matrix[5]);
+    }
+
     //  Render bobs
     for (var i = 0; i < list.length; i++)
     {
@@ -73,6 +81,8 @@ var BlitterCanvasRenderer = function (renderer, src, interpolationPercentage, ca
             ctx.restore();
         }
     }
+    
+    ctx.restore();
 };
 
 module.exports = BlitterCanvasRenderer;

src/gameobjects/graphics/GraphicsCanvasRenderer.js

@@ -20,11 +20,11 @@ var GameObject = require('../GameObject');
  * @param {Phaser.GameObjects.Graphics} src - The Game Object being rendered in this call.
  * @param {number} interpolationPercentage - Reserved for future use and custom pipelines.
  * @param {Phaser.Cameras.Scene2D.Camera} camera - The Camera that is rendering the Game Object.
+ * @param {Phaser.GameObjects.Components.TransformMatrix} parentMatrix - This transform matrix is defined if the game object is nested
  * @param {CanvasRenderingContext2D} renderTargetCtx - [description]
  * @param {boolean} allowClip - [description]
- * @param {Phaser.GameObjects.Components.TransformMatrix} parentMatrix - This transform matrix is defined if the game object is nested
  */
-var GraphicsCanvasRenderer = function (renderer, src, interpolationPercentage, camera, renderTargetCtx, allowClip, parentMatrix)
+var GraphicsCanvasRenderer = function (renderer, src, interpolationPercentage, camera, parentMatrix, renderTargetCtx, allowClip)
 {
     if (GameObject.RENDER_MASK !== src.renderFlags || (src.cameraFilter > 0 && (src.cameraFilter & camera._id)))
     {
@@ -70,6 +70,11 @@ var GraphicsCanvasRenderer = function (renderer, src, interpolationPercentage, c
     }
 
     ctx.save();
+    if (parentMatrix !== undefined)
+    {
+        var matrix = parentMatrix.matrix;
+        ctx.transform(matrix[0], matrix[1], matrix[2], matrix[3], matrix[4], matrix[5]);
+    }
     ctx.translate(srcX - cameraScrollX, srcY - cameraScrollY);
     ctx.rotate(srcRotation);
     ctx.scale(srcScaleX, srcScaleY);

src/gameobjects/particles/ParticleManagerCanvasRenderer.js

@@ -30,6 +30,15 @@ var ParticleManagerCanvasRenderer = function (renderer, emitterManager, interpol
         return;
     }
 
+    var ctx = renderer.currentContext;
+
+    ctx.save();
+    if (parentMatrix !== undefined)
+    {
+        var matrix = parentMatrix.matrix;
+        ctx.transform(matrix[0], matrix[1], matrix[2], matrix[3], matrix[4], matrix[5]);
+    }
+
     for (var i = 0; i < emitters.length; i++)
     {
         var emitter = emitters[i];
@@ -42,7 +51,6 @@ var ParticleManagerCanvasRenderer = function (renderer, emitterManager, interpol
             continue;
         }
 
-        var ctx = renderer.currentContext;
 
         var lastAlpha = ctx.globalAlpha;
         var cameraScrollX = camera.scrollX * emitter.scrollFactorX;
@@ -103,6 +111,8 @@ var ParticleManagerCanvasRenderer = function (renderer, emitterManager, interpol
 
         ctx.globalAlpha = lastAlpha;
     }
+
+    ctx.restore();
 };
 
 module.exports = ParticleManagerCanvasRenderer;

src/gameobjects/rendertexture/RenderTextureCanvasRenderer.js

@@ -74,6 +74,11 @@ var RenderTextureCanvasRenderer = function (renderer, renderTexture, interpolati
     }
 
     ctx.save();
+    if (parentMatrix !== undefined)
+    {
+        var matrix = parentMatrix.matrix;
+        ctx.transform(matrix[0], matrix[1], matrix[2], matrix[3], matrix[4], matrix[5]);
+    }
     ctx.translate(renderTexture.x - camera.scrollX * renderTexture.scrollFactorX, renderTexture.y - camera.scrollY * renderTexture.scrollFactorY);
     ctx.rotate(renderTexture.rotation);
     ctx.scale(renderTexture.scaleX, renderTexture.scaleY);

src/gameobjects/sprite/SpriteCanvasRenderer.js

@@ -28,7 +28,7 @@ var SpriteCanvasRenderer = function (renderer, src, interpolationPercentage, cam
         return;
     }
 
-    renderer.drawImage(src, camera);
+    renderer.drawImage(src, camera, parentMatrix);
 };
 
 module.exports = SpriteCanvasRenderer;

src/gameobjects/text/static/TextCanvasRenderer.js

@@ -56,6 +56,12 @@ var TextCanvasRenderer = function (renderer, src, interpolationPercentage, camer
 
     ctx.save();
 
+    if (parentMatrix !== undefined)
+    {
+        var matrix = parentMatrix.matrix;
+        ctx.transform(matrix[0], matrix[1], matrix[2], matrix[3], matrix[4], matrix[5]);
+    }
+
     var tx = src.x - camera.scrollX * src.scrollFactorX;
     var ty = src.y - camera.scrollY * src.scrollFactorY;
 

src/gameobjects/tilesprite/TileSpriteCanvasRenderer.js

@@ -89,6 +89,12 @@ var TileSpriteCanvasRenderer = function (renderer, src, interpolationPercentage,
 
     ctx.save();
 
+    if (parentMatrix !== undefined)
+    {
+        var matrix = parentMatrix.matrix;
+        ctx.transform(matrix[0], matrix[1], matrix[2], matrix[3], matrix[4], matrix[5]);
+    }
+
     ctx.translate(dx, dy);
 
     ctx.translate(tx, ty);