Updated CanvasPool to store the type (2d or webgl), so it doesn't give incorrect canvases back out again. Updated Features to use proper canvases when feature testing. Added Interpolation code. Cached the Smoothing prefix.

Author: photonstorm

v3/src/boot/Game.js

@@ -87,8 +87,8 @@ Game.prototype = {
 
         console.log(CHECKSUM.build);
 
-        console.log('pool', CanvasPool.getTotal());
-        console.log('free', CanvasPool.getFree());
+        console.log('pool', CanvasPool.total());
+        console.log('free', CanvasPool.free());
 
         //  Add in ability to specify pre-init and post-init callbacks in the config
 

v3/src/checksum.js

@@ -1,4 +1,4 @@
 var CHECKSUM = {
-build: '0a915bb0-b376-11e6-8e00-5b1f6d1d763b'
+build: '1e855860-b380-11e6-ae1d-777159c5bd92'
 };
 module.exports = CHECKSUM;

v3/src/device/Features.js

@@ -136,23 +136,31 @@ function init ()
         {
             try
             {
-                var canvas = CanvasPool.create(this, 1, 1);
+                var canvas = CanvasPool.createWebGL(this);
 
-                //  cocoon ...
-                canvas.screencanvas = false;
+                if (OS.cocoonJS)
+                {
+                    canvas.screencanvas = false;
+                }
 
                 var ctx = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
 
-                var image = ctx.createImageData(1, 1);
+                var canvas2D = CanvasPool.create2D(this);
 
+                var ctx2D = canvas2D.getContext('2d');
+
+                //  Can't be done on a webgl context
+                var image = ctx2D.createImageData(1, 1);
+    
                 /**
                 * Test to see if ImageData uses CanvasPixelArray or Uint8ClampedArray.
                 *
                 * @author Matt DesLauriers (@mattdesl)
                 */
                 isUint8 = image.data instanceof Uint8ClampedArray;
 
-                CanvasPool.removeByCanvas(canvas);
+                CanvasPool.remove(canvas);
+                CanvasPool.remove(canvas2D);
 
                 return (ctx !== null);
             }

v3/src/dom/CanvasInterpolation.js

@@ -0,0 +1,43 @@
+var CanvasInterpolation = {
+
+    /**
+    * Sets the CSS image-rendering property on the given canvas to be 'crisp' (aka 'optimize contrast' on webkit).
+    * Note that if this doesn't given the desired result then see the setSmoothingEnabled.
+    *
+    * @method Phaser.Canvas.setImageRenderingCrisp
+    * @param {HTMLCanvasElement} canvas - The canvas to set image-rendering crisp on.
+    * @return {HTMLCanvasElement} Returns the source canvas.
+    */
+    setCrisp: function (canvas)
+    {
+        var types = [ 'optimizeSpeed', 'crisp-edges', '-moz-crisp-edges', '-webkit-optimize-contrast', 'optimize-contrast', 'pixelated' ];
+
+        types.forEach(function(type)
+        {
+            canvas.style['image-rendering'] = type;
+        });
+
+        canvas.style.msInterpolationMode = 'nearest-neighbor';
+
+        return canvas;
+    },
+
+    /**
+    * Sets the CSS image-rendering property on the given canvas to be 'bicubic' (aka 'auto').
+    * Note that if this doesn't given the desired result then see the CanvasUtils.setSmoothingEnabled method.
+    *
+    * @method Phaser.Canvas.setImageRenderingBicubic
+    * @param {HTMLCanvasElement} canvas The canvas to set image-rendering bicubic on.
+    * @return {HTMLCanvasElement} Returns the source canvas.
+    */
+    setBicubic: function (canvas)
+    {
+        canvas.style['image-rendering'] = 'auto';
+        canvas.style.msInterpolationMode = 'bicubic';
+
+        return canvas;
+    }
+
+};
+
+module.exports = CanvasInterpolation;

v3/src/dom/CanvasPool.js

@@ -4,6 +4,8 @@
 * @license      {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
 */
 
+var CONST = require('../const');
+
 /**
  * The pool into which the canvas elements are placed.
  *
@@ -35,18 +37,23 @@ var CanvasPool = function ()
     * @param {number} height - The height of the canvas element.
     * @return {HTMLCanvasElement} The canvas element.
     */
-    var create = function (parent, width, height)
+    var create = function (parent, width, height, type)
     {
-        var idx = first();
-        var canvas;
+        if (width === undefined) { width = 1; }
+        if (height === undefined) { height = 1; }
+        if (type === undefined) { type = CONST.CANVAS; }
 
-        console.log('CanvasPool.create', idx);
+        var canvas;
+        var container = first(type);
 
-        if (idx === -1)
+        if (container === null)
         {
-            var container = {
+            console.log('CanvasPool.create new');
+
+            container = {
                 parent: parent,
-                canvas: document.createElement('canvas')
+                canvas: document.createElement('canvas'),
+                type: type
             };
 
             pool.push(container);
@@ -55,9 +62,11 @@ var CanvasPool = function ()
         }
         else
         {
-            pool[idx].parent = parent;
+            console.log('CanvasPool.create existing');
+
+            container.parent = parent;
 
-            canvas = pool[idx].canvas;
+            canvas = container.canvas;
         }
 
         if (width !== undefined)
@@ -69,24 +78,36 @@ var CanvasPool = function ()
         return canvas;
     };
 
+    var create2D = function (parent, width, height)
+    {
+        return create(parent, width, height, CONST.CANVAS);
+    };
+
+    var createWebGL = function (parent, width, height)
+    {
+        return create(parent, width, height, CONST.WEBGL);
+    };
+
     /**
     * Gets the first free canvas index from the pool.
     * 
     * @static
     * @method Phaser.CanvasPool.getFirst
     * @return {number}
     */
-    var first = function ()
+    var first = function (type)
     {
-        for (var i = 0; i < pool.length; i++)
+        if (type === undefined) { type = CONST.CANVAS; }
+
+        pool.forEach(function (container)
         {
-            if (!pool[i].parent)
+            if (!container.parent && container.type === type)
             {
-                return i;
+                return container;
             }
-        }
+        });
 
-        return -1;
+        return null;
     };
 
     /**
@@ -95,49 +116,23 @@ var CanvasPool = function ()
     * 
     * @static
     * @method Phaser.CanvasPool.remove
-    * @param {any} parent - The parent of the canvas element.
+    * @param {any|HTMLCanvasElement} parent - The parent of the canvas element.
     */
     var remove = function (parent)
     {
-        //  Check to see if the parent is a canvas object, then do removeByCanvas stuff instead
-        //  CanvasRenderingContext2D
-
-        for (var i = 0; i < pool.length; i++)
-        {
-            if (pool[i].parent === parent)
-            {
-                pool[i].parent = null;
-                pool[i].canvas.width = 1;
-                pool[i].canvas.height = 1;
-            }
-        }
-
-    };
-
-    /**
-    * Looks up a canvas based on its type, and if found puts it back in the pool, freeing it up for re-use.
-    * The canvas has its width and height set to 1, and its parent attribute nulled.
-    * 
-    * @static
-    * @method Phaser.CanvasPool.removeByCanvas
-    * @param {HTMLCanvasElement} canvas - The canvas element to remove.
-    */
-    var removeByCanvas = function (canvas)
-    {
-        console.log('removeByCanvas');
+        //  Check to see if the parent is a canvas object
+        var isCanvas = parent instanceof HTMLCanvasElement;
 
-        for (var i = 0; i < pool.length; i++)
+        pool.forEach(function (container)
         {
-            if (pool[i].canvas === canvas)
+            if ((isCanvas && container.canvas === parent) || (!isCanvas && container.parent === parent))
             {
-                console.log('found and removed');
-
-                pool[i].parent = null;
-                pool[i].canvas.width = 1;
-                pool[i].canvas.height = 1;
+                console.log('CanvasPool.remove found and removed');
+                container.parent = null;
+                container.canvas.width = 1;
+                container.canvas.height = 1;
             }
-        }
-
+        });
     };
 
     /**
@@ -147,17 +142,17 @@ var CanvasPool = function ()
     * @method Phaser.CanvasPool.getTotal
     * @return {number} The number of in-use (parented) canvas elements in the pool.
     */
-    var getTotal = function ()
+    var total = function ()
     {
         var c = 0;
 
-        for (var i = 0; i < pool.length; i++)
+        pool.forEach(function (container)
         {
-            if (pool[i].parent)
+            if (container.parent)
             {
                 c++;
             }
-        }
+        });
 
         return c;
     };
@@ -169,32 +164,22 @@ var CanvasPool = function ()
     * @method Phaser.CanvasPool.getFree
     * @return {number} The number of free (un-parented) canvas elements in the pool.
     */
-    var getFree = function ()
+    var free = function ()
     {
-        var c = 0;
-
-        for (var i = 0; i < pool.length; i++)
-        {
-            if (!pool[i].parent)
-            {
-                c++;
-            }
-        }
-
-        return c;
+        return pool.length - total();
     };
 
     return {
         create: create,
+        create2D: create2D,
+        createWebGL: createWebGL,
         first: first,
         remove: remove,
-        removeByCanvas: removeByCanvas,
-        getTotal: getTotal,
-        getFree: getFree,
+        total: total,
+        free: free,
         pool: pool
     };
 };
 
 //  If we export the called function here, it'll only be invoked once (not every time it's required).
-//  This function must return something though
 module.exports = CanvasPool();