Canvas GeometryMask rendering

Author: bitnenfer

v3/src/display/mask/BitmapMask.js

@@ -144,6 +144,16 @@ var BitmapMask = new Class({
 
         // Apply alpha masking using mask renderer      
         maskRenderer.draw(null, null, this.mainTexture, this.maskTexture);
+    },
+
+    preRenderCanvas: function (renderer, mask, camera)
+    {
+        // NOOP
+    },
+
+    postRenderCanvas: function (renderer)
+    {
+        // NOOP
     }
 
 });

v3/src/display/mask/GeometryMask.js

@@ -46,6 +46,21 @@ var GeometryMask = new Class({
         // Force flush before disabling stencil test
         renderer.currentRenderer.flush();
         gl.disable(gl.STENCIL_TEST);
+    },
+
+    preRenderCanvas: function (renderer, mask, camera)
+    {
+        var geometryMask = this.geometryMask;
+        renderer.currentContext.save();
+        //renderer.currentContext.beginPath();
+        geometryMask.renderCanvas(renderer, geometryMask, 0.0, camera, null, true);
+        renderer.currentContext.clip();
+    },
+
+    postRenderCanvas: function (renderer)
+    {
+        //renderer.currentContext.closePath();
+        renderer.currentContext.restore();
     }
 
 });

v3/src/gameobjects/graphics/GraphicsCanvasRenderer.js

@@ -1,7 +1,7 @@
 var Commands = require('./Commands');
 var GameObject = require('../GameObject');
 
-var GraphicsCanvasRenderer = function (renderer, src, interpolationPercentage, camera, renderTargetCtx)
+var GraphicsCanvasRenderer = function (renderer, src, interpolationPercentage, camera, renderTargetCtx, allowClip)
 {
     if (GameObject.RENDER_MASK !== src.renderFlags || (src.cameraFilter > 0 && (src.cameraFilter & camera._id)))
     {
@@ -102,20 +102,38 @@ var GraphicsCanvasRenderer = function (renderer, src, interpolationPercentage, c
                 break;
 
             case Commands.FILL_PATH:
-                ctx.fill();
+                if (!allowClip) 
+                {
+                    ctx.fill();
+                }
                 break;
 
             case Commands.STROKE_PATH:
-                ctx.stroke();
+                if (!allowClip)
+                {
+                    ctx.stroke();
+                }
                 break;
 
             case Commands.FILL_RECT:
-                ctx.fillRect(
-                    commandBuffer[index + 1],
-                    commandBuffer[index + 2],
-                    commandBuffer[index + 3],
-                    commandBuffer[index + 4]
-                );
+                if (!allowClip)
+                {
+                    ctx.fillRect(
+                        commandBuffer[index + 1],
+                        commandBuffer[index + 2],
+                        commandBuffer[index + 3],
+                        commandBuffer[index + 4]
+                    );
+                }
+                else
+                {
+                    ctx.rect(
+                        commandBuffer[index + 1],
+                        commandBuffer[index + 2],
+                        commandBuffer[index + 3],
+                        commandBuffer[index + 4]
+                    );
+                }
                 index += 4;
                 break;
 
@@ -125,7 +143,10 @@ var GraphicsCanvasRenderer = function (renderer, src, interpolationPercentage, c
                 ctx.lineTo(commandBuffer[index + 3], commandBuffer[index + 4]);
                 ctx.lineTo(commandBuffer[index + 5], commandBuffer[index + 6]);
                 ctx.closePath();
-                ctx.fill();
+                if (!allowClip) 
+                {
+                    ctx.fill();
+                }
                 index += 6;
                 break;
 
@@ -135,7 +156,10 @@ var GraphicsCanvasRenderer = function (renderer, src, interpolationPercentage, c
                 ctx.lineTo(commandBuffer[index + 3], commandBuffer[index + 4]);
                 ctx.lineTo(commandBuffer[index + 5], commandBuffer[index + 6]);
                 ctx.closePath();
-                ctx.stroke();
+                if (!allowClip)
+                {
+                    ctx.stroke();
+                }
                 index += 6;
                 break;
 

v3/src/renderer/canvas/CanvasRenderer.js

@@ -215,7 +215,18 @@ var CanvasRenderer = new Class({
         {
             var child = list[c];
 
+            if (child.mask)
+            {
+                child.mask.preRenderCanvas(this, child, camera);
+            }
+
             child.renderCanvas(this, child, interpolationPercentage, camera);
+
+            if (child.mask)
+            {
+                child.mask.postRenderCanvas(this, child, camera);
+            }
+
         }
 
         //  Call the Scene.render function