@vpmedia/phaser 1.0.1 → 1.0.2

package/src/phaser/display/canvas/buffer.js

@@ -0,0 +1,36 @@
+/**
+ * @author       Andras Csizmadia <andras@vpmedia.hu>
+ * @author       Richard Davey <rich@photonstorm.com>
+ * @author       Mat Groves http://matgroves.com/ @Doormat23
+ * @copyright    Copyright (c) 2018-present Richard Davey, Photon Storm Ltd., Andras Csizmadia <andras@vpmedia.hu> (www.vpmedia.hu)
+ */
+import { create, removeByCanvas } from './pool';
+
+export default class {
+
+  constructor(width, height) {
+    this.width = width;
+    this.height = height;
+    this.canvas = create(this, this.width, this.height);
+    this.context = this.canvas.getContext('2d');
+    this.canvas.width = width;
+    this.canvas.height = height;
+  }
+
+  clear() {
+    this.context.setTransform(1, 0, 0, 1, 0, 0);
+    this.context.clearRect(0, 0, this.width, this.height);
+  }
+
+  resize(width, height) {
+    this.width = width;
+    this.height = height;
+    this.canvas.width = width;
+    this.canvas.height = height;
+  }
+
+  destroy() {
+    removeByCanvas(this.canvas);
+  }
+
+}

package/src/phaser/display/canvas/graphics.js

@@ -0,0 +1,227 @@
+/**
+ * @author       Andras Csizmadia <andras@vpmedia.hu>
+ * @author       Richard Davey <rich@photonstorm.com>
+ * @author       Mat Groves http://matgroves.com/ @Doormat23
+ * @copyright    Copyright (c) 2018-present Richard Davey, Photon Storm Ltd., Andras Csizmadia <andras@vpmedia.hu> (www.vpmedia.hu)
+ */
+import { GEOM_POLYGON, GEOM_RECTANGLE, GEOM_CIRCLE, GEOM_ELLIPSE, GEOM_ROUNDED_RECTANGLE } from '../../core/const';
+
+/**
+ *
+ * @param graphics
+ */
+export function updateGraphicsTint(graphics) {
+  if (graphics.tint === 0xFFFFFF) {
+    return;
+  }
+  const tintR = (graphics.tint >> 16 & 0xFF) / 255;
+  const tintG = (graphics.tint >> 8 & 0xFF) / 255;
+  const tintB = (graphics.tint & 0xFF) / 255;
+  for (let i = 0; i < graphics.graphicsData.length; i += 1) {
+    const data = graphics.graphicsData[i];
+    const fillColor = data.fillColor | 0;
+    const lineColor = data.lineColor | 0;
+    data._fillTint = (((fillColor >> 16 & 0xFF) / 255 * tintR * 255 << 16) + ((fillColor >> 8 & 0xFF) / 255 * tintG * 255 << 8) + (fillColor & 0xFF) / 255 * tintB * 255);
+    data._lineTint = (((lineColor >> 16 & 0xFF) / 255 * tintR * 255 << 16) + ((lineColor >> 8 & 0xFF) / 255 * tintG * 255 << 8) + (lineColor & 0xFF) / 255 * tintB * 255);
+  }
+}
+
+/**
+ *
+ * @param graphics
+ * @param context
+ */
+export function renderGraphics(graphics, context) {
+  const worldAlpha = graphics.worldAlpha;
+  if (graphics.dirty) {
+    updateGraphicsTint(graphics);
+    graphics.dirty = false;
+  }
+  for (let i = 0; i < graphics.graphicsData.length; i += 1) {
+    const data = graphics.graphicsData[i];
+    const shape = data.shape;
+    const fillColor = data._fillTint;
+    const lineColor = data._lineTint;
+    context.lineWidth = data.lineWidth;
+    if (data.type === GEOM_POLYGON) {
+      context.beginPath();
+      const points = shape.points;
+      context.moveTo(points[0], points[1]);
+      for (let j = 1; j < points.length / 2; j += 1) {
+        context.lineTo(points[j * 2], points[j * 2 + 1]);
+      }
+      if (shape.closed) {
+        context.lineTo(points[0], points[1]);
+      }
+      // if the first and last point are the same close the path - much neater :)
+      if (points[0] === points[points.length - 2] && points[1] === points[points.length - 1]) {
+        context.closePath();
+      }
+      if (data.fill) {
+        context.globalAlpha = data.fillAlpha * worldAlpha;
+        context.fillStyle = '#' + ('00000' + (fillColor | 0).toString(16)).substr(-6);
+        context.fill();
+      }
+      if (data.lineWidth) {
+        context.globalAlpha = data.lineAlpha * worldAlpha;
+        context.strokeStyle = '#' + ('00000' + (lineColor | 0).toString(16)).substr(-6);
+        context.stroke();
+      }
+    } else if (data.type === GEOM_RECTANGLE) {
+      if (data.fillColor || data.fillColor === 0) {
+        context.globalAlpha = data.fillAlpha * worldAlpha;
+        context.fillStyle = '#' + ('00000' + (fillColor | 0).toString(16)).substr(-6);
+        context.fillRect(shape.x, shape.y, shape.width, shape.height);
+      }
+      if (data.lineWidth) {
+        context.globalAlpha = data.lineAlpha * worldAlpha;
+        context.strokeStyle = '#' + ('00000' + (lineColor | 0).toString(16)).substr(-6);
+        context.strokeRect(shape.x, shape.y, shape.width, shape.height);
+      }
+    } else if (data.type === GEOM_CIRCLE) {
+      context.beginPath();
+      context.arc(shape.x, shape.y, shape.radius, 0, 2 * Math.PI);
+      context.closePath();
+      if (data.fill) {
+        context.globalAlpha = data.fillAlpha * worldAlpha;
+        context.fillStyle = '#' + ('00000' + (fillColor | 0).toString(16)).substr(-6);
+        context.fill();
+      }
+      if (data.lineWidth) {
+        context.globalAlpha = data.lineAlpha * worldAlpha;
+        context.strokeStyle = '#' + ('00000' + (lineColor | 0).toString(16)).substr(-6);
+        context.stroke();
+      }
+    } else if (data.type === GEOM_ELLIPSE) {
+      // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas
+      const w = shape.width * 2;
+      const h = shape.height * 2;
+      const x = shape.x - w / 2;
+      const y = shape.y - h / 2;
+      context.beginPath();
+      const kappa = 0.5522848;
+      const ox = (w / 2) * kappa; // control point offset horizontal
+      const oy = (h / 2) * kappa; // control point offset vertical
+      const xe = x + w; // x-end
+      const ye = y + h; // y-end
+      const xm = x + w / 2; // x-middle
+      const ym = y + h / 2; // y-middle
+      context.moveTo(x, ym);
+      context.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
+      context.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
+      context.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
+      context.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
+      context.closePath();
+      if (data.fill) {
+        context.globalAlpha = data.fillAlpha * worldAlpha;
+        context.fillStyle = '#' + ('00000' + (fillColor | 0).toString(16)).substr(-6);
+        context.fill();
+      }
+      if (data.lineWidth) {
+        context.globalAlpha = data.lineAlpha * worldAlpha;
+        context.strokeStyle = '#' + ('00000' + (lineColor | 0).toString(16)).substr(-6);
+        context.stroke();
+      }
+    } else if (data.type === GEOM_ROUNDED_RECTANGLE) {
+      const rx = shape.x;
+      const ry = shape.y;
+      const width = shape.width;
+      const height = shape.height;
+      let radius = shape.radius;
+      const maxRadius = Math.min(width, height) / 2 | 0;
+      radius = radius > maxRadius ? maxRadius : radius;
+      context.beginPath();
+      context.moveTo(rx, ry + radius);
+      context.lineTo(rx, ry + height - radius);
+      context.quadraticCurveTo(rx, ry + height, rx + radius, ry + height);
+      context.lineTo(rx + width - radius, ry + height);
+      context.quadraticCurveTo(rx + width, ry + height, rx + width, ry + height - radius);
+      context.lineTo(rx + width, ry + radius);
+      context.quadraticCurveTo(rx + width, ry, rx + width - radius, ry);
+      context.lineTo(rx + radius, ry);
+      context.quadraticCurveTo(rx, ry, rx, ry + radius);
+      context.closePath();
+      if (data.fillColor || data.fillColor === 0) {
+        context.globalAlpha = data.fillAlpha * worldAlpha;
+        context.fillStyle = '#' + ('00000' + (fillColor | 0).toString(16)).substr(-6);
+        context.fill();
+      }
+      if (data.lineWidth) {
+        context.globalAlpha = data.lineAlpha * worldAlpha;
+        context.strokeStyle = '#' + ('00000' + (lineColor | 0).toString(16)).substr(-6);
+        context.stroke();
+      }
+    }
+  }
+}
+
+/**
+ *
+ * @param graphics
+ * @param context
+ */
+export function renderGraphicsMask(graphics, context) {
+  const len = graphics.graphicsData.length;
+  if (len === 0) {
+    return;
+  }
+  context.beginPath();
+  for (let i = 0; i < len; i += 1) {
+    const data = graphics.graphicsData[i];
+    const shape = data.shape;
+    if (data.type === GEOM_POLYGON) {
+      const points = shape.points;
+      context.moveTo(points[0], points[1]);
+      for (let j = 1; j < points.length / 2; j += 1) {
+        context.lineTo(points[j * 2], points[j * 2 + 1]);
+      }
+      // if the first and last point are the same close the path - much neater :)
+      if (points[0] === points[points.length - 2] && points[1] === points[points.length - 1]) {
+        context.closePath();
+      }
+    } else if (data.type === GEOM_RECTANGLE) {
+      context.rect(shape.x, shape.y, shape.width, shape.height);
+      context.closePath();
+    } else if (data.type === GEOM_CIRCLE) {
+      context.arc(shape.x, shape.y, shape.radius, 0, 2 * Math.PI);
+      context.closePath();
+    } else if (data.type === GEOM_ELLIPSE) {
+      // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas
+      const w = shape.width * 2;
+      const h = shape.height * 2;
+      const x = shape.x - w / 2;
+      const y = shape.y - h / 2;
+      const kappa = 0.5522848;
+      const ox = (w / 2) * kappa; // control point offset horizontal
+      const oy = (h / 2) * kappa; // control point offset vertical
+      const xe = x + w; // x-end
+      const ye = y + h; // y-end
+      const xm = x + w / 2; // x-middle
+      const ym = y + h / 2; // y-middle
+      context.moveTo(x, ym);
+      context.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
+      context.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
+      context.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
+      context.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
+      context.closePath();
+    } else if (data.type === GEOM_ROUNDED_RECTANGLE) {
+      const rx = shape.x;
+      const ry = shape.y;
+      const width = shape.width;
+      const height = shape.height;
+      let radius = shape.radius;
+      const maxRadius = Math.min(width, height) / 2 | 0;
+      radius = radius > maxRadius ? maxRadius : radius;
+      context.moveTo(rx, ry + radius);
+      context.lineTo(rx, ry + height - radius);
+      context.quadraticCurveTo(rx, ry + height, rx + radius, ry + height);
+      context.lineTo(rx + width - radius, ry + height);
+      context.quadraticCurveTo(rx + width, ry + height, rx + width, ry + height - radius);
+      context.lineTo(rx + width, ry + radius);
+      context.quadraticCurveTo(rx + width, ry, rx + width - radius, ry);
+      context.lineTo(rx + radius, ry);
+      context.quadraticCurveTo(rx, ry, rx, ry + radius);
+      context.closePath();
+    }
+  }
+}

package/src/phaser/display/canvas/masker.js

@@ -0,0 +1,39 @@
+/**
+ * @author       Andras Csizmadia <andras@vpmedia.hu>
+ * @author       Richard Davey <rich@photonstorm.com>
+ * @author       Mat Groves http://matgroves.com/ @Doormat23
+ * @copyright    Copyright (c) 2018-present Richard Davey, Photon Storm Ltd., Andras Csizmadia <andras@vpmedia.hu> (www.vpmedia.hu)
+ */
+import { renderGraphicsMask } from './graphics';
+
+/**
+ *
+ * @param maskData
+ * @param renderSession
+ */
+export function pushMask(maskData, renderSession) {
+  const context = renderSession.context;
+  context.save();
+  const cacheAlpha = maskData.alpha;
+  const transform = maskData.worldTransform;
+  const resolution = renderSession.resolution;
+  context.setTransform(
+    transform.a * resolution,
+    transform.b * resolution,
+    transform.c * resolution,
+    transform.d * resolution,
+    transform.tx * resolution,
+    transform.ty * resolution,
+  );
+  renderGraphicsMask(maskData, context);
+  context.clip();
+  maskData.worldAlpha = cacheAlpha;
+}
+
+/**
+ *
+ * @param renderSession
+ */
+export function popMask(renderSession) {
+  renderSession.context.restore();
+}

package/src/phaser/display/canvas/pool.js

@@ -0,0 +1,121 @@
+/**
+ * @author       Andras Csizmadia <andras@vpmedia.hu>
+ * @author       Richard Davey <rich@photonstorm.com>
+ * @author       Mat Groves http://matgroves.com/ @Doormat23
+ * @copyright    Copyright (c) 2018-present Richard Davey, Photon Storm Ltd., Andras Csizmadia <andras@vpmedia.hu> (www.vpmedia.hu)
+ */
+
+/**
+ *
+ */
+export function getPool() {
+  if (!window.PhaserRegistry) {
+    window.PhaserRegistry = {};
+  }
+  if (!window.PhaserRegistry.CANVAS_POOL) {
+    window.PhaserRegistry.CANVAS_POOL = [];
+  }
+  return window.PhaserRegistry.CANVAS_POOL;
+}
+
+/**
+ *
+ */
+export function getFirst() {
+  const pool = getPool();
+  for (let i = 0; i < pool.length; i += 1) {
+    if (!pool[i].parent) {
+      return i;
+    }
+  }
+  return -1;
+}
+
+/**
+ *
+ * @param parent
+ */
+export function remove(parent) {
+  const pool = getPool();
+  for (let i = 0; i < pool.length; i += 1) {
+    if (pool[i].parent === parent) {
+      pool[i].parent = null;
+      pool[i].canvas.width = 1;
+      pool[i].canvas.height = 1;
+    }
+  }
+}
+
+/**
+ *
+ * @param canvas
+ */
+export function removeByCanvas(canvas) {
+  const pool = getPool();
+  for (let i = 0; i < pool.length; i += 1) {
+    if (pool[i].canvas === canvas) {
+      pool[i].parent = null;
+      pool[i].canvas.width = 1;
+      pool[i].canvas.height = 1;
+    }
+  }
+}
+
+/**
+ *
+ */
+export function getTotal() {
+  const pool = getPool();
+  let c = 0;
+  for (let i = 0; i < pool.length; i += 1) {
+    if (pool[i].parent) {
+      c += 1;
+    }
+  }
+  return c;
+}
+
+/**
+ *
+ */
+export function getFree() {
+  const pool = getPool();
+  let c = 0;
+  for (let i = 0; i < pool.length; i += 1) {
+    if (!pool[i].parent) {
+      c += 1;
+    }
+  }
+  return c;
+}
+
+/**
+ *
+ * @param parent
+ * @param width
+ * @param height
+ */
+export function create(parent, width, height) {
+  if (parent === undefined) {
+    console.warn('Created CanvasPool element with undefined parent.');
+  }
+  const idx = getFirst();
+  const pool = getPool();
+  let canvas;
+  if (idx === -1) {
+    const container = {
+      parent,
+      canvas: document.createElement('canvas'),
+    };
+    pool.push(container);
+    canvas = container.canvas;
+  } else {
+    pool[idx].parent = parent;
+    canvas = pool[idx].canvas;
+  }
+  if (width !== undefined) {
+    canvas.width = width;
+    canvas.height = height;
+  }
+  return canvas;
+}

package/src/phaser/display/canvas/renderer.js

@@ -0,0 +1,123 @@
+/**
+ * @author       Andras Csizmadia <andras@vpmedia.hu>
+ * @author       Richard Davey <rich@photonstorm.com>
+ * @author       Mat Groves http://matgroves.com/ @Doormat23
+ * @copyright    Copyright (c) 2018-present Richard Davey, Photon Storm Ltd., Andras Csizmadia <andras@vpmedia.hu> (www.vpmedia.hu)
+ */
+import { RENDER_CANVAS, SCALE_LINEAR, BLEND_NORMAL, BLEND_ADD, BLEND_MULTIPLY, BLEND_SCREEN, BLEND_OVERLAY, BLEND_DARKEN, BLEND_LIGHTEN, BLEND_COLOR_DODGE, BLEND_COLOR_BURN, BLEND_HARD_LIGHT, BLEND_SOFT_LIGHT, BLEND_DIFFERENCE, BLEND_EXCLUSION, BLEND_HUE, BLEND_SATURATION, BLEND_COLOR, BLEND_LUMINOSITY } from '../../core/const';
+import { getSmoothingPrefix } from './util';
+import { detectCapabilities } from './tinter';
+import * as CanvasMaskManager from './masker';
+
+export default class {
+
+  constructor(game) {
+    detectCapabilities();
+    this.type = RENDER_CANVAS;
+    this.resolution = game.config.resolution;
+    this.clearBeforeRender = game.config.clearBeforeRender;
+    this.transparent = game.config.transparent;
+    this.autoResize = false;
+    this.width = game.width * this.resolution;
+    this.height = game.height * this.resolution;
+    this.view = game.canvas;
+    this.context = this.view.getContext('2d', { alpha: this.transparent });
+    if (!this.context) {
+      throw new Error('Error creating Canvas 2D context.');
+    }
+    this.refresh = true;
+    this.count = 0;
+    this.renderSession = {
+      context: this.context,
+      maskManager: CanvasMaskManager,
+      scaleMode: null,
+      smoothProperty: getSmoothingPrefix(this.context),
+      roundPixels: false,
+    };
+    this.mapBlendModes();
+    this.resize(this.width, this.height);
+    window.PhaserRegistry.DEFAULT_RENDERER = this;
+  }
+
+  render(root) {
+    if (!this.context) {
+      return;
+    }
+    this.context.setTransform(1, 0, 0, 1, 0, 0);
+    this.context.globalAlpha = 1;
+    this.renderSession.currentBlendMode = 0;
+    this.renderSession.shakeX = 0;
+    this.renderSession.shakeY = 0;
+    this.context.globalCompositeOperation = 'source-over';
+    if (navigator.isCocoonJS && this.view.screencanvas) {
+      this.context.fillStyle = 'black';
+      this.context.clear();
+    }
+    if (this.clearBeforeRender) {
+      if (this.transparent) {
+        this.context.clearRect(0, 0, this.width, this.height);
+      } else if (root._bgColor) {
+        this.context.fillStyle = root._bgColor.rgba;
+        this.context.fillRect(0, 0, this.width, this.height);
+      }
+    }
+    this.renderDisplayObject(root);
+  }
+
+  destroy(removeView = true) {
+    if (removeView && this.view.parent) {
+      this.view.parent.removeChild(this.view);
+    }
+    this.view = null;
+    this.context = null;
+    this.renderSession = null;
+    window.PhaserRegistry.DEFAULT_RENDERER = null;
+  }
+
+  resize(width, height) {
+    this.width = width * this.resolution;
+    this.height = height * this.resolution;
+    this.view.width = this.width;
+    this.view.height = this.height;
+    if (this.autoResize) {
+      this.view.style.width = this.width / this.resolution + 'px';
+      this.view.style.height = this.height / this.resolution + 'px';
+    }
+    if (this.renderSession.smoothProperty) {
+      this.context[this.renderSession.smoothProperty] = (this.renderSession.scaleMode === SCALE_LINEAR);
+    }
+  }
+
+  renderDisplayObject(displayObject, context, matrix) {
+    this.renderSession.context = context || this.context;
+    this.renderSession.resolution = this.resolution;
+    displayObject.renderCanvas(this.renderSession, matrix);
+  }
+
+  mapBlendModes() {
+    if (window.PhaserRegistry.blendModesCanvas) {
+      return;
+    }
+    const b = [];
+    const useNew = window.PhaserRegistry.CAN_CANVAS_USE_MULTIPLY;
+    b[BLEND_NORMAL] = 'source-over';
+    b[BLEND_ADD] = 'lighter';
+    b[BLEND_MULTIPLY] = (useNew) ? 'multiply' : 'source-over';
+    b[BLEND_SCREEN] = (useNew) ? 'screen' : 'source-over';
+    b[BLEND_OVERLAY] = (useNew) ? 'overlay' : 'source-over';
+    b[BLEND_DARKEN] = (useNew) ? 'darken' : 'source-over';
+    b[BLEND_LIGHTEN] = (useNew) ? 'lighten' : 'source-over';
+    b[BLEND_COLOR_DODGE] = (useNew) ? 'color-dodge' : 'source-over';
+    b[BLEND_COLOR_BURN] = (useNew) ? 'color-burn' : 'source-over';
+    b[BLEND_HARD_LIGHT] = (useNew) ? 'hard-light' : 'source-over';
+    b[BLEND_SOFT_LIGHT] = (useNew) ? 'soft-light' : 'source-over';
+    b[BLEND_DIFFERENCE] = (useNew) ? 'difference' : 'source-over';
+    b[BLEND_EXCLUSION] = (useNew) ? 'exclusion' : 'source-over';
+    b[BLEND_HUE] = (useNew) ? 'hue' : 'source-over';
+    b[BLEND_SATURATION] = (useNew) ? 'saturation' : 'source-over';
+    b[BLEND_COLOR] = (useNew) ? 'color' : 'source-over';
+    b[BLEND_LUMINOSITY] = (useNew) ? 'luminosity' : 'source-over';
+    window.PhaserRegistry.blendModesCanvas = b;
+  }
+
+}

package/src/phaser/display/canvas/tinter.js

@@ -0,0 +1,141 @@
+/**
+ * @author       Andras Csizmadia <andras@vpmedia.hu>
+ * @author       Richard Davey <rich@photonstorm.com>
+ * @author       Mat Groves http://matgroves.com/ @Doormat23
+ * @copyright    Copyright (c) 2018-present Richard Davey, Photon Storm Ltd., Andras Csizmadia <andras@vpmedia.hu> (www.vpmedia.hu)
+ */
+import CanvasBuffer from './buffer';
+import { create, removeByCanvas } from './pool';
+import { hex2rgb } from '../../util/math';
+
+/**
+ *
+ * @param sprite
+ * @param color
+ */
+export function getTintedTexture(sprite, color) {
+  const canvas = sprite.tintedTexture || create('CanvasTinter');
+  window.PhaserRegistry.CANVAS_TINT_METHOD(sprite.texture, color, canvas);
+  return canvas;
+}
+
+/**
+ *
+ * @param texture
+ * @param color
+ * @param canvas
+ */
+export function tintWithMultiply(texture, color, canvas) {
+  const context = canvas.getContext('2d');
+  const crop = texture.crop;
+  if (canvas.width !== crop.width || canvas.height !== crop.height) {
+    canvas.width = crop.width;
+    canvas.height = crop.height;
+  }
+  context.clearRect(0, 0, crop.width, crop.height);
+  context.fillStyle = '#' + ('00000' + (color | 0).toString(16)).substr(-6);
+  context.fillRect(0, 0, crop.width, crop.height);
+  context.globalCompositeOperation = 'multiply';
+  context.drawImage(texture.baseTexture.source, crop.x, crop.y, crop.width, crop.height, 0, 0, crop.width, crop.height);
+  context.globalCompositeOperation = 'destination-atop';
+  context.drawImage(texture.baseTexture.source, crop.x, crop.y, crop.width, crop.height, 0, 0, crop.width, crop.height);
+}
+
+/**
+ *
+ * @param texture
+ * @param color
+ * @param canvas
+ */
+export function tintWithPerPixel(texture, color, canvas) {
+  const context = canvas.getContext('2d');
+  const crop = texture.crop;
+  canvas.width = crop.width;
+  canvas.height = crop.height;
+  context.globalCompositeOperation = 'copy';
+  context.drawImage(texture.baseTexture.source, crop.x, crop.y, crop.width, crop.height, 0, 0, crop.width, crop.height);
+  const rgbValues = hex2rgb(color);
+  const r = rgbValues[0];
+  const g = rgbValues[1];
+  const b = rgbValues[2];
+  const pixelData = context.getImageData(0, 0, crop.width, crop.height);
+  const pixels = pixelData.data;
+  for (let i = 0; i < pixels.length; i += 4) {
+    pixels[i + 0] *= r;
+    pixels[i + 1] *= g;
+    pixels[i + 2] *= b;
+    const canHandleAlpha = window.PhaserRegistry.CAN_CANVAS_HANDLE_ALPHA;
+    if (!canHandleAlpha) {
+      const alpha = pixels[i + 3];
+      pixels[i + 0] /= 255 / alpha;
+      pixels[i + 1] /= 255 / alpha;
+      pixels[i + 2] /= 255 / alpha;
+    }
+  }
+  context.putImageData(pixelData, 0, 0);
+}
+
+/**
+ *
+ */
+export function checkInverseAlpha() {
+  const canvas = new CanvasBuffer(2, 1);
+  canvas.context.fillStyle = 'rgba(10, 20, 30, 0.5)';
+  //  Draw a single pixel
+  canvas.context.fillRect(0, 0, 1, 1);
+  //  Get the color values
+  const s1 = canvas.context.getImageData(0, 0, 1, 1);
+  if (s1 === null) {
+    return false;
+  }
+  //  Plot them to x2
+  canvas.context.putImageData(s1, 1, 0);
+  //  Get those values
+  const s2 = canvas.context.getImageData(1, 0, 1, 1);
+  //  Compare and return
+  return (s2.data[0] === s1.data[0] && s2.data[1] === s1.data[1] && s2.data[2] === s1.data[2] && s2.data[3] === s1.data[3]);
+}
+
+/**
+ *
+ */
+export function canUseNewCanvasBlendModes() {
+  if (document === undefined) {
+    return false;
+  }
+  const pngHead = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABAQMAAADD8p2OAAAAA1BMVEX/';
+  const pngEnd = 'AAAACklEQVQI12NgAAAAAgAB4iG8MwAAAABJRU5ErkJggg==';
+  const magenta = new Image();
+  magenta.src = pngHead + 'AP804Oa6' + pngEnd;
+  const yellow = new Image();
+  yellow.src = pngHead + '/wCKxvRF' + pngEnd;
+  const canvas = create('CanvasTinter', 6, 1);
+  const context = canvas.getContext('2d');
+  context.globalCompositeOperation = 'multiply';
+  context.drawImage(magenta, 0, 0);
+  context.drawImage(yellow, 2, 0);
+  if (!context.getImageData(2, 0, 1, 1)) {
+    return false;
+  }
+  const data = context.getImageData(2, 0, 1, 1).data;
+  removeByCanvas(canvas);
+  return (data[0] === 255 && data[1] === 0 && data[2] === 0);
+}
+
+/**
+ *
+ */
+export function detectCapabilities() {
+  if (!window.PhaserRegistry) {
+    window.PhaserRegistry = {};
+  }
+  if (!window.PhaserRegistry.CAN_CANVAS_HANDLE_ALPHA) {
+    window.PhaserRegistry.CAN_CANVAS_HANDLE_ALPHA = checkInverseAlpha();
+  }
+  if (!window.PhaserRegistry.CAN_CANVAS_USE_MULTIPLY) {
+    window.PhaserRegistry.CAN_CANVAS_USE_MULTIPLY = canUseNewCanvasBlendModes();
+  }
+  if (!window.PhaserRegistry.CANVAS_TINT_METHOD) {
+    window.PhaserRegistry.CANVAS_TINT_METHOD = window.PhaserRegistry.CAN_CANVAS_USE_MULTIPLY ? tintWithMultiply : tintWithPerPixel;
+  }
+}