The Canvas SetTransform method would save the context state, but it wasn't restored at the end in the following Game Objects: Dynamic Bitmap Text, Graphics, Arc, Curve, Ellipse, Grid, IsoBox, IsoTriangle, Line, Polygon, Rectangle, Star and Triangle. These now all restore the context, meaning if you're using non-canvas sized cameras in Canvas mode, it will now render beyond just the first custom camera.

CHANGELOG.md

@@ -116,6 +116,7 @@
 * `Particle.index` has been removed, as it's no longer required. Particles don't need to keep track of their index any more.
 * The Particle Emitter no longer needs to call the StableSort.inplace during its preUpdate, saving cpu.
 * `Particle.resetPosition` is a new method that is called when a particle dies, preparing it ready for firing again in the future.
+* The Canvas `SetTransform` method would save the context state, but it wasn't restored at the end in the following Game Objects: Dynamic Bitmap Text, Graphics, Arc, Curve, Ellipse, Grid, IsoBox, IsoTriangle, Line, Polygon, Rectangle, Star and Triangle. These now all restore the context, meaning if you're using non-canvas sized cameras in Canvas mode, it will now render beyond just the first custom camera.
 
 ### Examples and TypeScript
 

src/gameobjects/bitmaptext/dynamic/DynamicBitmapTextCanvasRenderer.js

@@ -72,7 +72,6 @@ var DynamicBitmapTextCanvasRenderer = function (renderer, src, interpolationPerc
 
     if (src.cropWidth > 0 && src.cropHeight > 0)
     {
-        ctx.save();
         ctx.beginPath();
         ctx.rect(0, 0, src.cropWidth, src.cropHeight);
         ctx.clip();
@@ -167,11 +166,7 @@ var DynamicBitmapTextCanvasRenderer = function (renderer, src, interpolationPerc
         lastCharCode = charCode;
     }
 
-    if (src.cropWidth > 0 && src.cropHeight > 0)
-    {
-        ctx.restore();
-    }
-
+    //  Restore the context saved in SetTransform
     ctx.restore();
 };
 

src/gameobjects/graphics/GraphicsCanvasRenderer.js

@@ -45,8 +45,6 @@ var GraphicsCanvasRenderer = function (renderer, src, interpolationPercentage, c
     var green = 0;
     var blue = 0;
 
-    ctx.save();
-
     //  Reset any currently active paths
     ctx.beginPath();
 
@@ -239,6 +237,7 @@ var GraphicsCanvasRenderer = function (renderer, src, interpolationPercentage, c
         }
     }
 
+    //  Restore the context saved in SetTransform
     ctx.restore();
 };
 

src/gameobjects/shape/arc/ArcCanvasRenderer.js

@@ -61,6 +61,9 @@ var ArcCanvasRenderer = function (renderer, src, interpolationPercentage, camera
 
             ctx.stroke();
         }
+
+        //  Restore the context saved in SetTransform
+        ctx.restore();
     }
 };
 

src/gameobjects/shape/curve/CurveCanvasRenderer.js

@@ -73,6 +73,9 @@ var CurveCanvasRenderer = function (renderer, src, interpolationPercentage, came
 
             ctx.stroke();
         }
+
+        //  Restore the context saved in SetTransform
+        ctx.restore();
     }
 };
 

src/gameobjects/shape/ellipse/EllipseCanvasRenderer.js

@@ -70,6 +70,9 @@ var EllipseCanvasRenderer = function (renderer, src, interpolationPercentage, ca
 
             ctx.stroke();
         }
+
+        //  Restore the context saved in SetTransform
+        ctx.restore();
     }
 };
 

src/gameobjects/shape/grid/GridCanvasRenderer.js

@@ -59,6 +59,9 @@ var RectangleCanvasRenderer = function (renderer, src, interpolationPercentage,
 
             ctx.stroke();
         }
+
+        //  Restore the context saved in SetTransform
+        ctx.restore();
     }
 };
 

src/gameobjects/shape/isobox/IsoBoxCanvasRenderer.js

@@ -86,6 +86,9 @@ var IsoBoxCanvasRenderer = function (renderer, src, interpolationPercentage, cam
 
             ctx.fill();
         }
+
+        //  Restore the context saved in SetTransform
+        ctx.restore();
     }
 };
 

src/gameobjects/shape/isotriangle/IsoTriangleCanvasRenderer.js

@@ -99,6 +99,9 @@ var IsoTriangleCanvasRenderer = function (renderer, src, interpolationPercentage
 
             ctx.fill();
         }
+
+        //  Restore the context saved in SetTransform
+        ctx.restore();
     }
 };
 

src/gameobjects/shape/line/LineCanvasRenderer.js

@@ -42,6 +42,9 @@ var LineCanvasRenderer = function (renderer, src, interpolationPercentage, camer
     
             ctx.stroke();
         }
+
+        //  Restore the context saved in SetTransform
+        ctx.restore();
     }
 };
 

src/gameobjects/shape/polygon/PolygonCanvasRenderer.js

@@ -70,6 +70,9 @@ var PolygonCanvasRenderer = function (renderer, src, interpolationPercentage, ca
 
             ctx.stroke();
         }
+
+        //  Restore the context saved in SetTransform
+        ctx.restore();
     }
 };
 

src/gameobjects/shape/rectangle/RectangleCanvasRenderer.js

@@ -59,6 +59,9 @@ var RectangleCanvasRenderer = function (renderer, src, interpolationPercentage,
 
             ctx.stroke();
         }
+
+        //  Restore the context saved in SetTransform
+        ctx.restore();
     }
 };
 

src/gameobjects/shape/star/StarCanvasRenderer.js

@@ -70,6 +70,9 @@ var StarCanvasRenderer = function (renderer, src, interpolationPercentage, camer
 
             ctx.stroke();
         }
+
+        //  Restore the context saved in SetTransform
+        ctx.restore();
     }
 };
 

src/gameobjects/shape/triangle/TriangleCanvasRenderer.js

@@ -60,6 +60,9 @@ var TriangleCanvasRenderer = function (renderer, src, interpolationPercentage, c
 
             ctx.stroke();
         }
+
+        //  Restore the context saved in SetTransform
+        ctx.restore();
     }
 };
 

src/renderer/canvas/CanvasRenderer.js

@@ -410,7 +410,15 @@ var CanvasRenderer = new Class({
 
         var ctx = (camera.renderToTexture) ? camera.context : scene.sys.context;
 
-        var scissor = (cx !== 0 || cy !== 0 || cw !== ctx.canvas.width || ch !== ctx.canvas.height);
+        //  Save context pre-clip
+        ctx.save();
+
+        if (this.game.scene.customViewports)
+        {
+            ctx.beginPath();
+            ctx.rect(cx, cy, cw, ch);
+            ctx.clip();
+        }
 
         this.currentContext = ctx;
 
@@ -426,15 +434,6 @@ var CanvasRenderer = new Class({
 
         this.drawCount += list.length;
 
-        ctx.save();
-
-        if (scissor)
-        {
-            ctx.beginPath();
-            ctx.rect(cx, cy, cw, ch);
-            ctx.clip();
-        }
-
         if (camera.renderToTexture)
         {
             camera.emit('prerender', camera);
@@ -473,6 +472,7 @@ var CanvasRenderer = new Class({
 
         camera.dirty = false;
 
+        //  Restore pre-clip context
         ctx.restore();
 
         if (camera.renderToTexture)