Canvas camera scissor

Author: bitnenfer

v3/src/renderer/canvas/CanvasRenderer.js

@@ -142,19 +142,27 @@ CanvasRenderer.prototype = {
      *   by the amount of time that will be simulated the next time update()
      *   runs. Useful for interpolating frames.
      */
-    render: function (state, list, interpolationPercentage)
+    render: function (state, list, interpolationPercentage, camera)
     {
         var w = state.sys.width;
         var h = state.sys.height;
         var ctx = state.sys.context;
         var settings = state.sys.settings;
-
+        var scissor = (camera.x !== 0 || camera.y !== 0 || camera.width !== ctx.canvas.width || camera.height !== ctx.canvas.height);
         this.currentContext = ctx;
 
         ctx.setTransform(1, 0, 0, 1, 0, 0);
 
         //  If the alpha or blend mode didn't change since the last render, then don't set them again (saves 2 ops)
 
+        if (scissor)
+        {
+            ctx.beginPath();
+            ctx.rect(camera.x, camera.y, camera.width, camera.height);
+            ctx.clip();
+            ctx.closePath();
+        }
+
         if (this.currentAlpha !== 1)
         {
             ctx.globalAlpha = 1;

v3/src/renderer/webgl/WebGLRenderer.js

@@ -261,9 +261,13 @@ WebGLRenderer.prototype = {
     {
         //  Could move to the State Systems or MainLoop
         var gl = this.gl;
+        var scissor = (camera.x !== 0 || camera.y !== 0 || camera.width !== gl.canvas.width || camera.height !== gl.canvas.height);
 
-        gl.enable(gl.SCISSOR_TEST);
-        gl.scissor(camera.x, (gl.drawingBufferWidth - camera.y - camera.height), camera.width, camera.height);
+        if (scissor)
+        {
+            gl.enable(gl.SCISSOR_TEST);
+            gl.scissor(camera.x, (gl.drawingBufferHeight - camera.y - camera.height), camera.width, camera.height);
+        }
         // We could either clear color or render a quad
         gl.clear(gl.COLOR_BUFFER_BIT);
 
@@ -302,18 +306,19 @@ WebGLRenderer.prototype = {
                 batch.flush();
             }
         }
-        batch.flush();
-        gl.disable(gl.SCISSOR_TEST);
-    },
-
-    //  Called at the end of the render loop (tidy things up, etc)
-    postRender: function ()
-    {
         if (this.batch)
         {
             this.batch.flush();
         }
+        if (scissor)
+        {
+            gl.disable(gl.SCISSOR_TEST);
+        }
+    },
 
+    //  Called at the end of the render loop (tidy things up, etc)
+    postRender: function ()
+    {
         //  Add Post-render hook
 
         // console.log('%c render end ', 'color: #ffffff; background: #ff0000;');