Added PIXI.canvas global object which allows for tighter configuration of the canvas renderer. Allows the dev to control if fillRect / clearRect is called (as it's not needed for lots of games and can help perf slightly on legacy devices). Also added PX_ROUND boolean. If true (default is false) it will Math.floor the x/y values on the transform, this stops interpolation when Sprites are rendered at non-pixel values, keeping pixel art crisp. Also helps performance on older mobiles. I removed the view.style.backgroundColor as it was never set, mostly commented-out and is unreliable as hell on Android anyway :( (which I guess is why it had been replaced with the fillRect instead).

src/pixi/Pixi.js

@@ -41,6 +41,21 @@ PIXI.scaleModes = {
     NEAREST:1
 };
 
+//  Canvas specific controls
+PIXI.canvas = {
+
+    //  If the Stage is NOT transparent Pixi will use a canvas sized fillRect operation every frame to set the canvas background color.
+    //  Disable this by setting this to false. For example if your game has a canvas filling background image you often don't need this set.
+    FILL_RECT: true,
+
+    //  If the Stage is transparent Pixi will use clearRect to clear the canvas every frame.
+    //  Disable this by setting this to false. For example if your game has a canvas filling background image you often don't need this set.
+    CLEAR_RECT: true,
+
+    //  If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. Handy for crisp pixel art and speed on legacy devices.
+    PX_ROUND: false
+}
+
 // interaction frequency 
 PIXI.INTERACTION_FREQUENCY = 30;
 PIXI.AUTO_PREVENT_DEFAULT = true;

src/pixi/display/Sprite.js

@@ -345,7 +345,15 @@ PIXI.Sprite.prototype._renderCanvas = function(renderSession)
 
         // allow for trimming
        
-        context.setTransform(transform.a, transform.c, transform.b, transform.d, transform.tx, transform.ty);
+        if (PIXI.canvas.PX_ROUND)
+        {
+            context.setTransform(transform.a, transform.c, transform.b, transform.d, Math.floor(transform.tx), Math.floor(transform.ty));
+        }
+        else
+        {
+            context.setTransform(transform.a, transform.c, transform.b, transform.d, transform.tx, transform.ty);
+        }
+
 
         //if smoothingEnabled is supported and we need to change the smoothing property for this texture
         if(renderSession.smoothProperty && renderSession.scaleMode !== this.texture.baseTexture.scaleMode) {

src/pixi/display/SpriteBatch.js

@@ -91,7 +91,15 @@ PIXI.SpriteBatch.prototype._renderCanvas = function(renderSession)
 
     // alow for trimming
        
-    context.setTransform(transform.a, transform.c, transform.b, transform.d, transform.tx, transform.ty);
+    if (PIXI.canvas.PX_ROUND)
+    {
+        context.setTransform(transform.a, transform.c, transform.b, transform.d, Math.floor(transform.tx), Math.floor(transform.ty));
+    }
+    else
+    {
+        context.setTransform(transform.a, transform.c, transform.b, transform.d, transform.tx, transform.ty);
+    }
+
     context.save();
 
     for (var i = 0; i < this.children.length; i++) {

src/pixi/renderers/canvas/CanvasRenderer.js

@@ -156,37 +156,25 @@ PIXI.CanvasRenderer.prototype.constructor = PIXI.CanvasRenderer;
  */
 PIXI.CanvasRenderer.prototype.render = function(stage)
 {
-    //stage.__childrenAdded = [];
-    //stage.__childrenRemoved = [];
-
     // update textures if need be
     PIXI.texturesToUpdate.length = 0;
     PIXI.texturesToDestroy.length = 0;
 
     stage.updateTransform();
 
-    // update the background color
-  /*  if(this.view.style.backgroundColor !== stage.backgroundColorString && !this.transparent)
-        this.view.style.backgroundColor = stage.backgroundColorString; */
-
     this.context.setTransform(1,0,0,1,0,0);
+    this.context.globalAlpha = 1;
 
-    if(this.view.style.backgroundColor !== stage.backgroundColorString )
+    if (!this.transparent && PIXI.canvas.FILL_RECT)
     {
-        if(!this.transparent)
-        {
-            this.context.globalAlpha = 1;
-            this.context.fillStyle = stage.backgroundColorString;
-            this.context.fillRect(0, 0, this.width, this.height);
-        }
-        else
-        {
-            this.context.clearRect(0, 0, this.width, this.height);
-        }
+        this.context.fillStyle = stage.backgroundColorString;
+        this.context.fillRect(0, 0, this.width, this.height);
+    }
+    else if (this.transparent && PIXI.canvas.CLEAR_RECT)
+    {
+        this.context.clearRect(0, 0, this.width, this.height);
     }
 
-    //console.log(this.view.style.backgroundColor)
-   
     this.renderDisplayObject(stage);
 
     // run interaction!