Added Canvas rendering functions

Author: photonstorm

src/gameobjects/shape/FillStyleCanvas.js

@@ -0,0 +1,29 @@
+/**
+ * @author       Richard Davey <rich@photonstorm.com>
+ * @copyright    2018 Photon Storm Ltd.
+ * @license      {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
+ */
+
+/**
+ * Sets the fillStyle on the target context based on the given Shape.
+ *
+ * @method Phaser.GameObjects.Shape#FillStyleCanvas
+ * @since 3.13.0
+ * @private
+ *
+ * @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 fillColor = src.fillColor;
+    var fillAlpha = src.fillAlpha;
+
+    var red = ((fillColor & 0xFF0000) >>> 16);
+    var green = ((fillColor & 0xFF00) >>> 8);
+    var blue = (fillColor & 0xFF);
+
+    ctx.fillStyle = 'rgba(' + red + ',' + green + ',' + blue + ',' + fillAlpha + ')';
+};
+
+module.exports = FillStyleCanvas;

src/gameobjects/shape/LineStyleCanvas.js

@@ -0,0 +1,30 @@
+/**
+ * @author       Richard Davey <rich@photonstorm.com>
+ * @copyright    2018 Photon Storm Ltd.
+ * @license      {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
+ */
+
+/**
+ * Sets the strokeStyle and lineWidth on the target context based on the given Shape.
+ *
+ * @method Phaser.GameObjects.Shape#LineStyleCanvas
+ * @since 3.13.0
+ * @private
+ *
+ * @param {CanvasRenderingContext2D} ctx - The context to set the stroke style on.
+ * @param {Phaser.GameObjects.Shape} src - The Game Object to set the stroke style from.
+ */
+var LineStyleCanvas = function (ctx, src)
+{
+    var strokeColor = src.strokeColor;
+    var strokeAlpha = src.strokeAlpha;
+
+    var red = ((strokeColor & 0xFF0000) >>> 16);
+    var green = ((strokeColor & 0xFF00) >>> 8);
+    var blue = (strokeColor & 0xFF);
+
+    ctx.strokeStyle = 'rgba(' + red + ',' + green + ',' + blue + ',' + strokeAlpha + ')';
+    ctx.lineWidth = src.lineWidth;
+};
+
+module.exports = LineStyleCanvas;

src/gameobjects/shape/rectangle/RectangleCanvasRenderer.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,41 @@
  */
 var RectangleCanvasRenderer = 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.isFilled)
+        {
+            FillStyleCanvas(ctx, src);
+        
+            ctx.fillRect(
+                -dx,
+                -dy,
+                src.width,
+                src.height
+            );
+        }
+
+        if (src.isStroked)
+        {
+            LineStyleCanvas(ctx, src);
+
+            ctx.beginPath();
+
+            ctx.rect(
+                -dx,
+                -dy,
+                src.width,
+                src.height
+            );
+
+            ctx.stroke();
+        }
+    }
 };
 
 module.exports = RectangleCanvasRenderer;

src/gameobjects/shape/triangle/TriangleCanvasRenderer.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,42 @@
  */
 var TriangleCanvasRenderer = 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 x1 = src.data.x1 - dx;
+        var y1 = src.data.y1 - dy;
+        var x2 = src.data.x2 - dx;
+        var y2 = src.data.y2 - dy;
+        var x3 = src.data.x3 - dx;
+        var y3 = src.data.y3 - dy;
+
+        ctx.beginPath();
+
+        ctx.moveTo(x1, y1);
+        ctx.lineTo(x2, y2);
+        ctx.lineTo(x3, y3);
+
+        ctx.closePath();
+
+        if (src.isFilled)
+        {
+            FillStyleCanvas(ctx, src);
+
+            ctx.fill();
+        }
+
+        if (src.isStroked)
+        {
+            LineStyleCanvas(ctx, src);
+
+            ctx.stroke();
+        }
+    }
 };
 
 module.exports = TriangleCanvasRenderer;