Added missing Shape canvas render functions

src/gameobjects/shape/FillStyleCanvas.js

@@ -14,9 +14,9 @@
  * @param {CanvasRenderingContext2D} ctx - The context to set the fill style on.
  * @param {Phaser.GameObjects.Shape} src - The Game Object to set the fill style from.
  */
-var FillStyleCanvas = function (ctx, src)
+var FillStyleCanvas = function (ctx, src, altColor)
 {
-    var fillColor = src.fillColor;
+    var fillColor = (altColor) ? altColor : src.fillColor;
     var fillAlpha = src.fillAlpha;
 
     var red = ((fillColor & 0xFF0000) >>> 16);

src/gameobjects/shape/arc/ArcCanvasRenderer.js

@@ -4,6 +4,11 @@
  * @license      {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
  */
 
+var DegToRad = require('../../../math/DegToRad');
+var FillStyleCanvas = require('../FillStyleCanvas');
+var LineStyleCanvas = require('../LineStyleCanvas');
+var SetTransform = require('../../../renderer/canvas/utils/SetTransform');
+
 /**
  * Renders this Game Object with the Canvas Renderer to the given Camera.
  * The object will not render if any of its renderFlags are set or it is being actively filtered out by the Camera.
@@ -21,6 +26,42 @@
  */
 var ArcCanvasRenderer = function (renderer, src, interpolationPercentage, camera, parentMatrix)
 {
+    var ctx = renderer.currentContext;
+
+    if (SetTransform(renderer, ctx, src, camera, parentMatrix))
+    {
+        var radius = src.radius;
+
+        ctx.beginPath();
+
+        ctx.arc(
+            (radius) - src.originX * (radius * 2),
+            (radius) - src.originY * (radius * 2),
+            radius,
+            DegToRad(src._startAngle),
+            DegToRad(src._endAngle),
+            src.anticlockwise
+        );
+
+        if (src.closePath)
+        {
+            ctx.closePath();
+        }
+
+        if (src.isFilled)
+        {
+            FillStyleCanvas(ctx, src);
+
+            ctx.fill();
+        }
+
+        if (src.isStroked)
+        {
+            LineStyleCanvas(ctx, src);
+
+            ctx.stroke();
+        }
+    }
 };
 
 module.exports = ArcCanvasRenderer;

src/gameobjects/shape/curve/CurveCanvasRenderer.js

@@ -4,6 +4,10 @@
  * @license      {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
  */
 
+var FillStyleCanvas = require('../FillStyleCanvas');
+var LineStyleCanvas = require('../LineStyleCanvas');
+var SetTransform = require('../../../renderer/canvas/utils/SetTransform');
+
 /**
  * Renders this Game Object with the Canvas Renderer to the given Camera.
  * The object will not render if any of its renderFlags are set or it is being actively filtered out by the Camera.
@@ -21,6 +25,55 @@
  */
 var CurveCanvasRenderer = function (renderer, src, interpolationPercentage, camera, parentMatrix)
 {
+    var ctx = renderer.currentContext;
+
+    if (SetTransform(renderer, ctx, src, camera, parentMatrix))
+    {
+        var dx = src._displayOriginX + src._curveBounds.x;
+        var dy = src._displayOriginY + src._curveBounds.y;
+    
+        var path = src.pathData;
+        var pathLength = path.length - 1;
+    
+        var px1 = path[0] - dx;
+        var py1 = path[1] - dy;
+
+        ctx.beginPath();
+
+        ctx.moveTo(px1, py1);
+    
+        if (!src.closePath)
+        {
+            pathLength -= 2;
+        }
+    
+        for (var i = 2; i < pathLength; i += 2)
+        {
+            var px2 = path[i] - dx;
+            var py2 = path[i + 1] - dy;
+    
+            ctx.lineTo(px2, py2);
+        }
+
+        if (src.closePath)
+        {
+            ctx.closePath();
+        }
+
+        if (src.isFilled)
+        {
+            FillStyleCanvas(ctx, src);
+
+            ctx.fill();
+        }
+
+        if (src.isStroked)
+        {
+            LineStyleCanvas(ctx, src);
+
+            ctx.stroke();
+        }
+    }
 };
 
 module.exports = CurveCanvasRenderer;

src/gameobjects/shape/ellipse/EllipseCanvasRenderer.js

@@ -4,6 +4,10 @@
  * @license      {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
  */
 
+var FillStyleCanvas = require('../FillStyleCanvas');
+var LineStyleCanvas = require('../LineStyleCanvas');
+var SetTransform = require('../../../renderer/canvas/utils/SetTransform');
+
 /**
  * Renders this Game Object with the Canvas Renderer to the given Camera.
  * The object will not render if any of its renderFlags are set or it is being actively filtered out by the Camera.
@@ -21,6 +25,52 @@
  */
 var EllipseCanvasRenderer = function (renderer, src, interpolationPercentage, camera, parentMatrix)
 {
+    var ctx = renderer.currentContext;
+
+    if (SetTransform(renderer, ctx, src, camera, parentMatrix))
+    {
+        var dx = src._displayOriginX;
+        var dy = src._displayOriginY;
+
+        var path = src.pathData;
+        var pathLength = path.length - 1;
+    
+        var px1 = path[0] - dx;
+        var py1 = path[1] - dy;
+
+        ctx.beginPath();
+
+        ctx.moveTo(px1, py1);
+    
+        if (!src.closePath)
+        {
+            pathLength -= 2;
+        }
+    
+        for (var i = 2; i < pathLength; i += 2)
+        {
+            var px2 = path[i] - dx;
+            var py2 = path[i + 1] - dy;
+    
+            ctx.lineTo(px2, py2);
+        }
+
+        ctx.closePath();
+
+        if (src.isFilled)
+        {
+            FillStyleCanvas(ctx, src);
+
+            ctx.fill();
+        }
+
+        if (src.isStroked)
+        {
+            LineStyleCanvas(ctx, src);
+
+            ctx.stroke();
+        }
+    }
 };
 
 module.exports = EllipseCanvasRenderer;

src/gameobjects/shape/isobox/IsoBoxCanvasRenderer.js

@@ -4,6 +4,9 @@
  * @license      {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
  */
 
+var FillStyleCanvas = require('../FillStyleCanvas');
+var SetTransform = require('../../../renderer/canvas/utils/SetTransform');
+
 /**
  * Renders this Game Object with the Canvas Renderer to the given Camera.
  * The object will not render if any of its renderFlags are set or it is being actively filtered out by the Camera.
@@ -21,6 +24,69 @@
  */
 var IsoBoxCanvasRenderer = function (renderer, src, interpolationPercentage, camera, parentMatrix)
 {
+    var ctx = renderer.currentContext;
+
+    if (SetTransform(renderer, ctx, src, camera, parentMatrix) && src.isFilled)
+    {
+        var size = src.width;
+        var height = src.height;
+    
+        var sizeA = size / 2;
+        var sizeB = size / src.projection;
+
+        //  Top Face
+
+        if (src.showTop)
+        {
+            FillStyleCanvas(ctx, src, src.fillTop);
+
+            ctx.beginPath();
+
+            ctx.moveTo(-sizeA, -height);
+            ctx.lineTo(0, -sizeB - height);
+            ctx.lineTo(sizeA, -height);
+            ctx.lineTo(sizeA, -1);
+            ctx.lineTo(0, sizeB - 1);
+            ctx.lineTo(-sizeA, -1);				
+            ctx.lineTo(-sizeA, -height);
+
+            ctx.fill();
+        }
+
+        //  Left Face
+
+        if (src.showLeft)
+        {
+            FillStyleCanvas(ctx, src, src.fillLeft);
+
+            ctx.beginPath();
+    
+            ctx.moveTo(-sizeA, 0);
+            ctx.lineTo(0, sizeB);
+            ctx.lineTo(0, sizeB - height);
+            ctx.lineTo(-sizeA, -height);
+            ctx.lineTo(-sizeA, 0);
+
+            ctx.fill();
+        }
+
+        //  Right Face
+
+        if (src.showRight)
+        {
+            FillStyleCanvas(ctx, src, src.fillRight);
+
+            ctx.beginPath();
+
+            ctx.moveTo(sizeA, 0);
+            ctx.lineTo(0, sizeB);
+            ctx.lineTo(0, sizeB - height);
+            ctx.lineTo(sizeA, -height);
+            ctx.lineTo(sizeA, 0);
+
+            ctx.fill();
+        }
+    }
 };
 
 module.exports = IsoBoxCanvasRenderer;

src/gameobjects/shape/isotriangle/IsoTriangleCanvasRenderer.js

@@ -4,6 +4,9 @@
  * @license      {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
  */
 
+var FillStyleCanvas = require('../FillStyleCanvas');
+var SetTransform = require('../../../renderer/canvas/utils/SetTransform');
+
 /**
  * Renders this Game Object with the Canvas Renderer to the given Camera.
  * The object will not render if any of its renderFlags are set or it is being actively filtered out by the Camera.
@@ -21,6 +24,82 @@
  */
 var IsoTriangleCanvasRenderer = function (renderer, src, interpolationPercentage, camera, parentMatrix)
 {
+    var ctx = renderer.currentContext;
+
+    if (SetTransform(renderer, ctx, src, camera, parentMatrix) && src.isFilled)
+    {
+        var size = src.width;
+        var height = src.height;
+    
+        var sizeA = size / 2;
+        var sizeB = size / src.projection;
+
+        var reversed = src.isReversed;
+
+        //  Top Face
+
+        if (src.showTop && reversed)
+        {
+            FillStyleCanvas(ctx, src, src.fillTop);
+
+            ctx.beginPath();
+
+            ctx.moveTo(-sizeA, -height);
+            ctx.lineTo(0, -sizeB - height);
+            ctx.lineTo(sizeA, -height);
+            ctx.lineTo(0, sizeB - height);
+
+            ctx.fill();
+        }
+
+        //  Left Face
+
+        if (src.showLeft)
+        {
+            FillStyleCanvas(ctx, src, src.fillLeft);
+
+            ctx.beginPath();
+
+            if (reversed)
+            {
+                ctx.moveTo(-sizeA, -height);
+                ctx.lineTo(0, sizeB);
+                ctx.lineTo(0, sizeB - height);
+            }
+            else
+            {
+                ctx.moveTo(-sizeA, 0);
+                ctx.lineTo(0, sizeB);
+                ctx.lineTo(0, sizeB - height);
+            }
+
+            ctx.fill();
+        }
+
+        //  Right Face
+
+        if (src.showRight)
+        {
+            FillStyleCanvas(ctx, src, src.fillRight);
+
+            ctx.beginPath();
+
+            if (reversed)
+            {
+                ctx.moveTo(sizeA, -height);
+                ctx.lineTo(0, sizeB);
+                ctx.lineTo(0, sizeB - height);
+            }
+            else
+            {
+                ctx.moveTo(sizeA, 0);
+                ctx.lineTo(0, sizeB);
+                ctx.lineTo(0, sizeB - height);
+            }
+
+            ctx.fill();
+        }
+    }
 };
 
 module.exports = IsoTriangleCanvasRenderer;

src/gameobjects/shape/line/LineCanvasRenderer.js

@@ -4,6 +4,9 @@
  * @license      {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
  */
 
+var LineStyleCanvas = require('../LineStyleCanvas');
+var SetTransform = require('../../../renderer/canvas/utils/SetTransform');
+
 /**
  * Renders this Game Object with the Canvas Renderer to the given Camera.
  * The object will not render if any of its renderFlags are set or it is being actively filtered out by the Camera.
@@ -21,6 +24,25 @@
  */
 var LineCanvasRenderer = function (renderer, src, interpolationPercentage, camera, parentMatrix)
 {
+    var ctx = renderer.currentContext;
+
+    if (SetTransform(renderer, ctx, src, camera, parentMatrix))
+    {
+        var dx = src._displayOriginX;
+        var dy = src._displayOriginY;
+
+        if (src.isStroked)
+        {
+            LineStyleCanvas(ctx, src);
+
+            ctx.beginPath();
+
+            ctx.moveTo(src.data.x1 - dx, src.data.y1 - dy);
+            ctx.lineTo(src.data.x2 - dx, src.data.y2 - dy);
+    
+            ctx.stroke();
+        }
+    }
 };
 
 module.exports = LineCanvasRenderer;

src/gameobjects/shape/polygon/PolygonCanvasRenderer.js

@@ -4,6 +4,10 @@
  * @license      {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
  */
 
+var FillStyleCanvas = require('../FillStyleCanvas');
+var LineStyleCanvas = require('../LineStyleCanvas');
+var SetTransform = require('../../../renderer/canvas/utils/SetTransform');
+
 /**
  * Renders this Game Object with the Canvas Renderer to the given Camera.
  * The object will not render if any of its renderFlags are set or it is being actively filtered out by the Camera.
@@ -21,6 +25,52 @@
  */
 var PolygonCanvasRenderer = function (renderer, src, interpolationPercentage, camera, parentMatrix)
 {
+    var ctx = renderer.currentContext;
+
+    if (SetTransform(renderer, ctx, src, camera, parentMatrix))
+    {
+        var dx = src._displayOriginX;
+        var dy = src._displayOriginY;
+
+        var path = src.pathData;
+        var pathLength = path.length - 1;
+    
+        var px1 = path[0] - dx;
+        var py1 = path[1] - dy;
+
+        ctx.beginPath();
+
+        ctx.moveTo(px1, py1);
+    
+        if (!src.closePath)
+        {
+            pathLength -= 2;
+        }
+    
+        for (var i = 2; i < pathLength; i += 2)
+        {
+            var px2 = path[i] - dx;
+            var py2 = path[i + 1] - dy;
+    
+            ctx.lineTo(px2, py2);
+        }
+
+        ctx.closePath();
+
+        if (src.isFilled)
+        {
+            FillStyleCanvas(ctx, src);
+
+            ctx.fill();
+        }
+
+        if (src.isStroked)
+        {
+            LineStyleCanvas(ctx, src);
+
+            ctx.stroke();
+        }
+    }
 };
 
 module.exports = PolygonCanvasRenderer;

src/gameobjects/shape/star/StarCanvasRenderer.js

@@ -4,6 +4,10 @@
  * @license      {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
  */
 
+var FillStyleCanvas = require('../FillStyleCanvas');
+var LineStyleCanvas = require('../LineStyleCanvas');
+var SetTransform = require('../../../renderer/canvas/utils/SetTransform');
+
 /**
  * Renders this Game Object with the Canvas Renderer to the given Camera.
  * The object will not render if any of its renderFlags are set or it is being actively filtered out by the Camera.
@@ -21,6 +25,52 @@
  */
 var StarCanvasRenderer = function (renderer, src, interpolationPercentage, camera, parentMatrix)
 {
+    var ctx = renderer.currentContext;
+
+    if (SetTransform(renderer, ctx, src, camera, parentMatrix))
+    {
+        var dx = src._displayOriginX;
+        var dy = src._displayOriginY;
+
+        var path = src.pathData;
+        var pathLength = path.length - 1;
+    
+        var px1 = path[0] - dx;
+        var py1 = path[1] - dy;
+
+        ctx.beginPath();
+
+        ctx.moveTo(px1, py1);
+    
+        if (!src.closePath)
+        {
+            pathLength -= 2;
+        }
+    
+        for (var i = 2; i < pathLength; i += 2)
+        {
+            var px2 = path[i] - dx;
+            var py2 = path[i + 1] - dy;
+    
+            ctx.lineTo(px2, py2);
+        }
+
+        ctx.closePath();
+
+        if (src.isFilled)
+        {
+            FillStyleCanvas(ctx, src);
+
+            ctx.fill();
+        }
+
+        if (src.isStroked)
+        {
+            LineStyleCanvas(ctx, src);
+
+            ctx.stroke();
+        }
+    }
 };
 
 module.exports = StarCanvasRenderer;