From c5c754725a6d65007ebe5114aab06ed8ab9d9a3d Mon Sep 17 00:00:00 2001
From: photonstorm <rdavey@gmail.com>
Date: Wed, 4 Dec 2013 22:39:53 +0000
Subject: [PATCH] * When a Sprite is destroyed any active filters are removed
 as well. * Updated Pixi.js so that removing filters now works correctly
 without breaking the display list.

---
 README.md                    |  6 ++++--
 examples/wip/removeFilter.js | 12 ++++++++----
 src/gameobjects/Sprite.js    | 12 +++++-------
 src/system/Canvas.js         | 28 ++++++++++++++++++----------
 4 files changed, 35 insertions(+), 23 deletions(-)

diff --git a/README.md b/README.md
index fb26e70f..f56efd5b 100644
--- a/README.md
+++ b/README.md
@@ -50,14 +50,16 @@ New features:
 
 Updates:
 
-* TBC
+* When a Sprite is destroyed any active filters are removed as well.
+* Updated Pixi.js so that removing filters now works correctly without breaking the display list.
+* Phaser.Canvas.create updated to it can be given an ID as the 3rd parameter.
 
 Bug Fixes:
 
 * Cache.getImageKeys returned __missing in the array, now excluded.
 * Fixed Group.scale so you can now scale a Group directly.
 * Removed World.scale as it was preventing Group.scale from working - you can still scale the world, but you'll need to factor in Input changes yourself.
-
+* Moved 'dirty' flag for Tilemap to a per-layer flag. Fixes #242
 
 You can view the Change Log for all previous versions at https://github.com/photonstorm/phaser/changelog.md
 
diff --git a/examples/wip/removeFilter.js b/examples/wip/removeFilter.js
index d5d11586..cf67aba4 100644
--- a/examples/wip/removeFilter.js
+++ b/examples/wip/removeFilter.js
@@ -15,6 +15,9 @@ function preload() {
 function create() {
 
 
+    logo = game.add.sprite(game.world.centerX, game.world.centerY, 'phaser');
+    logo.anchor.setTo(0.5, 0.5);
+
     background = game.add.sprite(0, 0);
     background.width = 800;
     background.height = 600;
@@ -24,8 +27,6 @@ function create() {
 
     background.filters = [filter];
 
-    logo = game.add.sprite(game.world.centerX, game.world.centerY, 'phaser');
-    logo.anchor.setTo(0.5, 0.5);
 
     game.input.onDown.add(removeBackground, this);
 
@@ -41,7 +42,10 @@ function removeBackground() {
 
     console.log('removeBackground');
 
-    // background.destroy();
-    background.removeFilter(filter);
+
+    // background.filters = null;
+    background.destroy();
+
+    // console.log(background.filters);
 
 }
diff --git a/src/gameobjects/Sprite.js b/src/gameobjects/Sprite.js
index 4ebded88..de08e4c2 100644
--- a/src/gameobjects/Sprite.js
+++ b/src/gameobjects/Sprite.js
@@ -840,6 +840,11 @@ Phaser.Sprite.prototype.kill = function() {
 */
 Phaser.Sprite.prototype.destroy = function() {
 
+    if (this.filters)
+    {
+        this.filters = null;
+    }
+
     if (this.group)
     {
         this.group.remove(this);
@@ -860,13 +865,6 @@ Phaser.Sprite.prototype.destroy = function() {
         this.animations.destroy();
     }
 
-    if (this._filters)
-    {
-        console.log('removeFilter', this._filters);
-        this.removeFilter(this._filters);
-        console.log(this._filters);
-    }
-
     this.alive = false;
     this.exists = false;
     this.visible = false;
diff --git a/src/system/Canvas.js b/src/system/Canvas.js
index c763be8c..ee4347c2 100644
--- a/src/system/Canvas.js
+++ b/src/system/Canvas.js
@@ -13,21 +13,29 @@
 Phaser.Canvas = {
 
     /**
-    * Creates the &lt;canvas&gt; tag
+    * Creates a `canvas` DOM element. The element is not automatically added to the document.
     *
     * @method Phaser.Canvas.create
-    * @param {number} width - The desired width.
-    * @param {number} height - The desired height.
-    * @return {HTMLCanvasElement} The newly created &lt;canvas&gt; tag.
+    * @param {number} [width=256] - The width of the canvas element.
+    * @param {number} [height=256] - The height of the canvas element..
+    * @param {string} [id=''] - If given this will be set as the ID of the canvas element, otherwise no ID will be set.
+    * @return {HTMLCanvasElement} The newly created canvas element.
     */
-    create: function (width, height) {
+    create: function (width, height, id) {
 
         width = width || 256;
         height = height || 256;
 
         var canvas = document.createElement('canvas');
+
+        if (typeof id === 'string')
+        {
+            canvas.id = id;
+        }
+
         canvas.width = width;
         canvas.height = height;
+
         canvas.style.display = 'block';
 
         return canvas;
@@ -137,7 +145,7 @@ Phaser.Canvas = {
     *
     * @method Phaser.Canvas.addToDOM
     * @param {HTMLCanvasElement} canvas - The canvas to set the touch action on.
-    * @param {string|HTMLElement} parent - The DOM element to add the canvas to. Defaults to ''.
+    * @param {string|HTMLElement} parent - The DOM element to add the canvas to.
     * @param {boolean} overflowHidden - If set to true it will add the overflow='hidden' style to the parent DOM element.
     * @return {HTMLCanvasElement} Returns the source canvas.
     */
@@ -149,14 +157,14 @@ Phaser.Canvas = {
 
         if (parent)
         {
-            // hopefully an element ID
             if (typeof parent === 'string')
             {
+                // hopefully an element ID
                 target = document.getElementById(parent);
             }
-            // quick test for a HTMLelement
             else if (typeof parent === 'object' && parent.nodeType === 1)
             {
+                // quick test for a HTMLelement
                 target = parent;
             }
 
@@ -166,8 +174,8 @@ Phaser.Canvas = {
             }
         }
 
-        // fallback, covers an invalid ID and a none HTMLelement object
-        if(!target)
+        // Fallback, covers an invalid ID and a non HTMLelement object
+        if (!target)
         {
             target = document.body;
         }