@vpmedia/phaser 1.11.0 → 1.12.0

package/src/phaser/core/tween_easing.js

@@ -84,7 +84,7 @@ export function QuarticIn(k) {
  * @returns {number} TBD
  */
 export function QuarticOut(k) {
-  return 1 - (--k * k * k * k);
+  return 1 - --k * k * k * k;
 }
 
 /**
@@ -133,7 +133,7 @@ export function QuinticInOut(k) {
 export function SinusoidalIn(k) {
   if (k === 0) return 0;
   if (k === 1) return 1;
-  return 1 - Math.cos(k * Math.PI / 2);
+  return 1 - Math.cos((k * Math.PI) / 2);
 }
 
 /**
@@ -144,7 +144,7 @@ export function SinusoidalIn(k) {
 export function SinusoidalOut(k) {
   if (k === 0) return 0;
   if (k === 1) return 1;
-  return Math.sin(k * Math.PI / 2);
+  return Math.sin((k * Math.PI) / 2);
 }
 
 /**
@@ -203,7 +203,7 @@ export function CircularIn(k) {
  * @returns {number} TBD
  */
 export function CircularOut(k) {
-  return Math.sqrt(1 - (--k * k));
+  return Math.sqrt(1 - --k * k);
 }
 
 /**
@@ -228,11 +228,12 @@ export function ElasticIn(k) {
   if (k === 0) return 0;
   if (k === 1) return 1;
   if (!a || a < 1) {
-    a = 1; s = p / 4;
+    a = 1;
+    s = p / 4;
   } else {
-    s = p * Math.asin(1 / a) / (2 * Math.PI);
+    s = (p * Math.asin(1 / a)) / (2 * Math.PI);
   }
-  return -(a * Math.pow(2, 10 * (k -= 1)) * Math.sin((k - s) * (2 * Math.PI) / p));
+  return -(a * Math.pow(2, 10 * (k -= 1)) * Math.sin(((k - s) * (2 * Math.PI)) / p));
 }
 
 /**
@@ -247,11 +248,12 @@ export function ElasticOut(k) {
   if (k === 0) return 0;
   if (k === 1) return 1;
   if (!a || a < 1) {
-    a = 1; s = p / 4;
+    a = 1;
+    s = p / 4;
   } else {
-    s = p * Math.asin(1 / a) / (2 * Math.PI);
+    s = (p * Math.asin(1 / a)) / (2 * Math.PI);
   }
-  return (a * Math.pow(2, -10 * k) * Math.sin((k - s) * (2 * Math.PI) / p) + 1);
+  return a * Math.pow(2, -10 * k) * Math.sin(((k - s) * (2 * Math.PI)) / p) + 1;
 }
 
 /**
@@ -266,12 +268,14 @@ export function ElasticInOut(k) {
   if (k === 0) return 0;
   if (k === 1) return 1;
   if (!a || a < 1) {
-    a = 1; s = p / 4;
+    a = 1;
+    s = p / 4;
   } else {
-    s = p * Math.asin(1 / a) / (2 * Math.PI);
+    s = (p * Math.asin(1 / a)) / (2 * Math.PI);
   }
-  if ((k *= 2) < 1) return -0.5 * (a * Math.pow(2, 10 * (k -= 1)) * Math.sin((k - s) * (2 * Math.PI) / p));
-  return a * Math.pow(2, -10 * (k -= 1)) * Math.sin((k - s) * (2 * Math.PI) / p) * 0.5 + 1;
+  if ((k *= 2) < 1)
+    return -0.5 * (a * Math.pow(2, 10 * (k -= 1)) * Math.sin(((k - s) * (2 * Math.PI)) / p));
+  return a * Math.pow(2, -10 * (k -= 1)) * Math.sin(((k - s) * (2 * Math.PI)) / p) * 0.5 + 1;
 }
 
 /**
@@ -311,14 +315,14 @@ export function BackInOut(k) {
  * @returns {number} TBD
  */
 export function BounceOut(k) {
-  if (k < (1 / 2.75)) {
+  if (k < 1 / 2.75) {
     return 7.5625 * k * k;
-  } else if (k < (2 / 2.75)) {
-    return 7.5625 * (k -= (1.5 / 2.75)) * k + 0.75;
-  } else if (k < (2.5 / 2.75)) {
-    return 7.5625 * (k -= (2.25 / 2.75)) * k + 0.9375;
+  } else if (k < 2 / 2.75) {
+    return 7.5625 * (k -= 1.5 / 2.75) * k + 0.75;
+  } else if (k < 2.5 / 2.75) {
+    return 7.5625 * (k -= 2.25 / 2.75) * k + 0.9375;
   }
-  return 7.5625 * (k -= (2.625 / 2.75)) * k + 0.984375;
+  return 7.5625 * (k -= 2.625 / 2.75) * k + 0.984375;
 }
 
 /**

package/src/phaser/core/tween_manager.js

@@ -6,21 +6,40 @@
 import Tween from './tween';
 import {
   LinearNone,
-  QuadraticIn, QuadraticOut, QuadraticInOut,
-  CubicIn, CubicOut, CubicInOut,
-  QuarticIn, QuarticOut, QuarticInOut,
-  QuinticIn, QuinticOut, QuinticInOut,
-  SinusoidalIn, SinusoidalOut, SinusoidalInOut,
-  ExponentialIn, ExponentialOut, ExponentialInOut,
-  CircularIn, CircularOut, CircularInOut,
-  ElasticIn, ElasticOut, ElasticInOut,
-  BackIn, BackOut, BackInOut,
-  BounceIn, BounceOut, BounceInOut,
+  QuadraticIn,
+  QuadraticOut,
+  QuadraticInOut,
+  CubicIn,
+  CubicOut,
+  CubicInOut,
+  QuarticIn,
+  QuarticOut,
+  QuarticInOut,
+  QuinticIn,
+  QuinticOut,
+  QuinticInOut,
+  SinusoidalIn,
+  SinusoidalOut,
+  SinusoidalInOut,
+  ExponentialIn,
+  ExponentialOut,
+  ExponentialInOut,
+  CircularIn,
+  CircularOut,
+  CircularInOut,
+  ElasticIn,
+  ElasticOut,
+  ElasticInOut,
+  BackIn,
+  BackOut,
+  BackInOut,
+  BounceIn,
+  BounceOut,
+  BounceInOut,
 } from './tween_easing';
 import { GROUP } from './const';
 
 export default class {
-
   constructor(game) {
     this.game = game;
     this._tweens = [];
@@ -154,7 +173,7 @@ export default class {
   }
 
   isTweening(object) {
-    return this._tweens.some(tween => tween.target === object);
+    return this._tweens.some((tween) => tween.target === object);
   }
 
   _pauseAll() {
@@ -180,5 +199,4 @@ export default class {
       this._tweens[i].resume(true);
     }
   }
-
 }

package/src/phaser/core/world.js

@@ -6,7 +6,6 @@
 import Group from '../display/group';
 
 export default class extends Group {
-
   constructor(game) {
     super(game, null, '__world', false);
   }
@@ -14,5 +13,4 @@ export default class extends Group {
   boot() {
     this.game.stage.addChild(this);
   }
-
 }

package/src/phaser/display/bitmap_text.js

@@ -9,7 +9,6 @@ import Point from '../geom/point';
 import { BITMAP_TEXT, SCALE_LINEAR, SCALE_NEAREST } from '../core/const';
 
 export default class extends DisplayObject {
-
   constructor(game, x = 0, y = 0, font = '', text = '', size = 32, align = 'left') {
     super();
     this.game = game;
@@ -25,7 +24,7 @@ export default class extends DisplayObject {
     this._font = font;
     this._fontSize = size;
     this._align = align;
-    this._tint = 0xFFFFFF;
+    this._tint = 0xffffff;
     this.updateText();
     this.dirty = false;
   }
@@ -67,7 +66,7 @@ export default class extends DisplayObject {
     let lastSpace = -1;
     let wrappedWidth = 0;
     let prevCharCode = null;
-    const maxWidth = (this._maxWidth > 0) ? this._maxWidth : null;
+    const maxWidth = this._maxWidth > 0 ? this._maxWidth : null;
     const chars = [];
     //  Let's scan the text and work out if any of the lines are > maxWidth
     let end = true;
@@ -91,7 +90,8 @@ export default class extends DisplayObject {
         charData = data.chars[charCode];
       }
       //  Adjust for kerning from previous character to this one
-      const kerning = (prevCharCode && charData.kerning[prevCharCode]) ? charData.kerning[prevCharCode] : 0;
+      const kerning =
+        prevCharCode && charData.kerning[prevCharCode] ? charData.kerning[prevCharCode] : 0;
       //  Record the last space in the string and the current width
       if (/(\s)/.test(text.charAt(i))) {
         lastSpace = i;
@@ -100,7 +100,7 @@ export default class extends DisplayObject {
       //  What will the line width be if we add this character to it?
       c = (kerning + charData.texture.width + charData.xOffset) * scale;
       //  Do we need to line-wrap?
-      if (maxWidth && ((w + c) >= maxWidth) && lastSpace > -1) {
+      if (maxWidth && w + c >= maxWidth && lastSpace > -1) {
         //  The last space was at "lastSpace" which was "i - lastSpace" characters ago
         return {
           width: wrappedWidth || w,
@@ -162,7 +162,7 @@ export default class extends DisplayObject {
       if (line.width > this.textWidth) {
         this.textWidth = line.width;
       }
-      y += (data.lineHeight * scale);
+      y += data.lineHeight * scale;
       text = text.substr(line.text.length + 1);
     } while (line.end === false);
     this.textHeight = y;
@@ -194,8 +194,8 @@ export default class extends DisplayObject {
           g.name = currentLine.text[c];
           this._glyphs.push(g);
         }
-        g.position.x = (currentLine.chars[c] + align) - ax;
-        g.position.y = (currentLine.y + (charData.yOffset * scale)) - ay;
+        g.position.x = currentLine.chars[c] + align - ax;
+        g.position.y = currentLine.y + charData.yOffset * scale - ay;
         g.scale.set(scale);
         g.tint = this.tint;
         g.texture.requiresReTint = true;
@@ -333,5 +333,4 @@ export default class extends DisplayObject {
       this._data.base.scaleMode = SCALE_NEAREST;
     }
   }
-
 }

package/src/phaser/display/button.js

@@ -15,8 +15,18 @@ const STATE_UP = 'Up';
 const STATE_DISABLED = 'Disabled';
 
 export default class extends Image {
-
-  constructor(game, x = 0, y = 0, key = null, callback = null, callbackContext = null, overFrame = null, outFrame = null, downFrame = null, upFrame = null) {
+  constructor(
+    game,
+    x = 0,
+    y = 0,
+    key = null,
+    callback = null,
+    callbackContext = null,
+    overFrame = null,
+    outFrame = null,
+    downFrame = null,
+    upFrame = null
+  ) {
     super(game, x, y, key, outFrame);
     this.type = BUTTON;
     this._onOverFrame = null;
@@ -125,7 +135,10 @@ export default class extends Image {
   }
 
   onInputOverHandler(sprite, pointer) {
-    if (pointer.justReleased() && (this.justReleasedPreventsOver & pointer.pointerMode) === pointer.pointerMode) {
+    if (
+      pointer.justReleased() &&
+      (this.justReleasedPreventsOver & pointer.pointerMode) === pointer.pointerMode
+    ) {
       //  If the Pointer was only just released then we don't fire an over event
       return;
     }
@@ -190,5 +203,4 @@ export default class extends Image {
       this.input.stop();
     }
   }
-
 }

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

@@ -7,7 +7,6 @@
 import { create, removeByCanvas } from './pool';
 
 export default class {
-
   constructor(width, height) {
     this.width = width;
     this.height = height;
@@ -32,5 +31,4 @@ export default class {
   destroy() {
     removeByCanvas(this.canvas);
   }
-
 }

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

@@ -4,25 +4,37 @@
  * @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';
+import {
+  GEOM_POLYGON,
+  GEOM_RECTANGLE,
+  GEOM_CIRCLE,
+  GEOM_ELLIPSE,
+  GEOM_ROUNDED_RECTANGLE,
+} from '../../core/const';
 
 /**
  *
  * @param {object} graphics TBD
  */
 export function updateGraphicsTint(graphics) {
-  if (graphics.tint === 0xFFFFFF) {
+  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;
+  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);
+    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;
   }
 }
 
@@ -128,7 +140,7 @@ export function renderGraphics(graphics, context) {
       const width = shape.width;
       const height = shape.height;
       let radius = shape.radius;
-      const maxRadius = Math.min(width, height) / 2 | 0;
+      const maxRadius = (Math.min(width, height) / 2) | 0;
       radius = radius > maxRadius ? maxRadius : radius;
       context.beginPath();
       context.moveTo(rx, ry + radius);
@@ -210,7 +222,7 @@ export function renderGraphicsMask(graphics, context) {
       const width = shape.width;
       const height = shape.height;
       let radius = shape.radius;
-      const maxRadius = Math.min(width, height) / 2 | 0;
+      const maxRadius = (Math.min(width, height) / 2) | 0;
       radius = radius > maxRadius ? maxRadius : radius;
       context.moveTo(rx, ry + radius);
       context.lineTo(rx, ry + height - radius);

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

@@ -23,7 +23,7 @@ export function pushMask(maskData, renderSession) {
     transform.c * resolution,
     transform.d * resolution,
     transform.tx * resolution,
-    transform.ty * resolution,
+    transform.ty * resolution
   );
   renderGraphicsMask(maskData, context);
   context.clip();

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

@@ -4,13 +4,33 @@
  * @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, SCALE_NEAREST } from '../../core/const';
+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,
+  SCALE_NEAREST,
+} 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;
@@ -78,7 +98,8 @@ export default class {
       this.view.style.height = this.height / this.resolution + 'px';
     }
     if (this.renderSession.smoothProperty) {
-      this.context[this.renderSession.smoothProperty] = (this.renderSession.scaleMode === SCALE_LINEAR);
+      this.context[this.renderSession.smoothProperty] =
+        this.renderSession.scaleMode === SCALE_LINEAR;
     }
   }
 
@@ -96,22 +117,21 @@ export default class {
     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';
+    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

@@ -37,9 +37,29 @@ export function tintWithMultiply(texture, color, canvas) {
   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.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);
+  context.drawImage(
+    texture.baseTexture.source,
+    crop.x,
+    crop.y,
+    crop.width,
+    crop.height,
+    0,
+    0,
+    crop.width,
+    crop.height
+  );
 }
 
 /**
@@ -54,7 +74,17 @@ export function tintWithPerPixel(texture, color, canvas) {
   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);
+  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];
@@ -95,7 +125,12 @@ export function checkInverseAlpha() {
   //  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]);
+  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]
+  );
 }
 
 /**
@@ -122,7 +157,7 @@ export function canUseNewCanvasBlendModes() {
   }
   const data = context.getImageData(2, 0, 1, 1).data;
   removeByCanvas(canvas);
-  return (data[0] === 255 && data[1] === 0 && data[2] === 0);
+  return data[0] === 255 && data[1] === 0 && data[2] === 0;
 }
 
 /**
@@ -139,6 +174,8 @@ export function detectCapabilities() {
     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;
+    window.PhaserRegistry.CANVAS_TINT_METHOD = window.PhaserRegistry.CAN_CANVAS_USE_MULTIPLY
+      ? tintWithMultiply
+      : tintWithPerPixel;
   }
 }

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

@@ -18,7 +18,7 @@ import { create as createCanvas } from './pool';
 export function create(parent, width, height, id, skipPool) {
   width = width || 256;
   height = height || 256;
-  const canvas = (skipPool) ? document.createElement('canvas') : createCanvas(parent, width, height);
+  const canvas = skipPool ? document.createElement('canvas') : createCanvas(parent, width, height);
   if (typeof id === 'string' && id !== '') {
     canvas.id = id;
   }