Added roundPixels support for the Canvas renderer

Author: photonstorm

src/renderer/canvas/CanvasRenderer.js

@@ -88,7 +88,8 @@ var CanvasRenderer = new Class({
             pixelArt: game.config.pixelArt,
             backgroundColor: game.config.backgroundColor,
             resolution: game.config.resolution,
-            autoResize: game.config.autoResize
+            autoResize: game.config.autoResize,
+            roundPixels: game.config.roundPixels
         };
 
         /**
@@ -134,7 +135,7 @@ var CanvasRenderer = new Class({
          * @type {function}
          * @since 3.0.0
          */
-        this.drawImage = DrawImage;
+        this.drawImage = DrawImage(this.config.roundPixels);
 
         /**
          * [description]
@@ -143,7 +144,7 @@ var CanvasRenderer = new Class({
          * @type {function}
          * @since 3.0.0
          */
-        this.blitImage = BlitImage;
+        this.blitImage = BlitImage(this.config.roundPixels);
 
         /**
          * [description]

src/renderer/canvas/utils/BlitImage.js

@@ -4,6 +4,8 @@
  * @license      {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
  */
 
+var roundPixels = false;
+
 /**
  * No scaling, anchor, rotation or effects, literally draws the frame directly to the canvas.
  *
@@ -19,6 +21,12 @@ var BlitImage = function (dx, dy, frame)
     var ctx = this.currentContext;
     var cd = frame.canvasData;
 
+    if (roundPixels)
+    {
+        dx |= 0;
+        dy |= 0;
+    }
+
     ctx.drawImage(
         frame.source.image,
         cd.sx,
@@ -32,4 +40,11 @@ var BlitImage = function (dx, dy, frame)
     );
 };
 
-module.exports = BlitImage;
+//  Special return so we can store the config value locally
+
+module.exports = function (configRoundPixels)
+{
+    roundPixels = configRoundPixels;
+
+    return BlitImage;
+};

src/renderer/canvas/utils/DrawImage.js

@@ -4,6 +4,8 @@
  * @license      {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
  */
 
+var roundPixels = false;
+
 /**
  * [description]
  *
@@ -70,11 +72,22 @@ var DrawImage = function (src, camera)
         dy -= src.displayOriginY;
     }
 
+    var tx = src.x - camera.scrollX * src.scrollFactorX;
+    var ty = src.y - camera.scrollY * src.scrollFactorY;
+
+    if (roundPixels)
+    {
+        tx |= 0;
+        ty |= 0;
+        dx |= 0;
+        dy |= 0;
+    }
+
     //  Perform Matrix ITRS
 
     ctx.save();
 
-    ctx.translate(src.x - camera.scrollX * src.scrollFactorX, src.y - camera.scrollY * src.scrollFactorY);
+    ctx.translate(tx, ty);
 
     ctx.rotate(src.rotation);
 
@@ -86,4 +99,11 @@ var DrawImage = function (src, camera)
     ctx.restore();
 };
 
-module.exports = DrawImage;
+//  Special return so we can store the config value locally
+
+module.exports = function (configRoundPixels)
+{
+    roundPixels = configRoundPixels;
+
+    return DrawImage;
+};