melonjs 14.1.1 → 14.2.0

package/dist/types/index.d.ts

@@ -0,0 +1,108 @@
+/**
+ * initialize the melonJS library.
+ * this is automatically called unless me.skipAutoInit is set to true,
+ * to allow asynchronous loaders to work.
+ * @name boot
+ * @see skipAutoInit
+ * @public
+ */
+export function boot(): void;
+/**
+ * current melonJS version
+ * @static
+ * @constant
+ * @name version
+ * @type {string}
+ */
+export const version: string;
+export * from "./lang/deprecated.js";
+/**
+ * a flag indicating that melonJS is fully initialized
+ * @type {boolean}
+ * @default false
+ * @readonly
+ */
+export const initialized: boolean;
+/**
+ * disable melonJS auto-initialization
+ * @type {boolean}
+ * @default false
+ * @see boot
+ */
+export const skipAutoInit: boolean;
+import * as audio from "./audio/audio.js";
+import collision from "./physics/collision.js";
+import * as device from "./system/device.js";
+import * as event from "./system/event.js";
+import game from "./game.js";
+import loader from "./loader/loader.js";
+import level from "./level/level.js";
+import * as input from "./input/input.js";
+import * as Math from "./math/math.js";
+import { plugin } from "./plugin/plugin.js";
+import { plugins } from "./plugin/plugin.js";
+import utils from "./utils/utils.js";
+import save from "./system/save.js";
+import timer from "./system/timer.js";
+import pool from "./system/pooling.js";
+import state from "./state/state.js";
+import * as video from "./video/video.js";
+import Color from "./math/color.js";
+import Vector2d from "./math/vector2.js";
+import Vector3d from "./math/vector3.js";
+import ObservableVector2d from "./math/observable_vector2.js";
+import ObservableVector3d from "./math/observable_vector3.js";
+import Matrix2d from "./math/matrix2.js";
+import Matrix3d from "./math/matrix3.js";
+import Polygon from "./geometries/poly.js";
+import Line from "./geometries/line.js";
+import Ellipse from "./geometries/ellipse.js";
+import Point from "./geometries/point.js";
+import Rect from "./geometries/rectangle.js";
+import RoundRect from "./geometries/roundrect.js";
+import Tween from "./tweens/tween.js";
+import QuadTree from "./physics/quadtree.js";
+import GLShader from "./video/webgl/glshader.js";
+import WebGLCompositor from "./video/webgl/webgl_compositor.js";
+import Renderer from "./video/renderer.js";
+import WebGLRenderer from "./video/webgl/webgl_renderer.js";
+import CanvasRenderer from "./video/canvas/canvas_renderer.js";
+import { TextureAtlas } from "./video/texture/atlas.js";
+import Renderable from "./renderable/renderable.js";
+import Body from "./physics/body.js";
+import Bounds from "./physics/bounds.js";
+import Text from "./text/text.js";
+import BitmapText from "./text/bitmaptext.js";
+import BitmapTextData from "./text/bitmaptextdata.js";
+import ColorLayer from "./renderable/colorlayer.js";
+import ImageLayer from "./renderable/imagelayer.js";
+import Sprite from "./renderable/sprite.js";
+import NineSliceSprite from "./renderable/nineslicesprite.js";
+import UIBaseElement from "./renderable/ui/uibaseelement.js";
+import UITextButton from "./renderable/ui/uitextbutton.js";
+import UISpriteElement from "./renderable/ui/uispriteelement.js";
+import Collectable from "./renderable/collectable.js";
+import Trigger from "./renderable/trigger.js";
+import Light2d from "./renderable/light2d.js";
+import { Draggable } from "./renderable/dragndrop.js";
+import { DropTarget } from "./renderable/dragndrop.js";
+import TMXRenderer from "./level/tiled/renderer/TMXRenderer.js";
+import TMXOrthogonalRenderer from "./level/tiled/renderer/TMXOrthogonalRenderer.js";
+import TMXIsometricRenderer from "./level/tiled/renderer/TMXIsometricRenderer.js";
+import TMXHexagonalRenderer from "./level/tiled/renderer/TMXHexagonalRenderer.js";
+import TMXStaggeredRenderer from "./level/tiled/renderer/TMXStaggeredRenderer.js";
+import Tile from "./level/tiled/TMXTile.js";
+import TMXTileset from "./level/tiled/TMXTileset.js";
+import TMXTilesetGroup from "./level/tiled/TMXTilesetGroup.js";
+import TMXTileMap from "./level/tiled/TMXTileMap.js";
+import TMXLayer from "./level/tiled/TMXLayer.js";
+import Pointer from "./input/pointer.js";
+import Stage from "./state/stage.js";
+import Camera2d from "./camera/camera2d.js";
+import Container from "./renderable/container.js";
+import World from "./physics/world.js";
+import ParticleEmitter from "./particles/emitter.js";
+import ParticleEmitterSettings from "./particles/settings.js";
+import Particle from "./particles/particle.js";
+import Entity from "./entity/entity.js";
+export { audio, collision, device, event, game, loader, level, input, Math, plugin, plugins, utils, save, timer, pool, state, video, Color, Vector2d, Vector3d, ObservableVector2d, ObservableVector3d, Matrix2d, Matrix3d, Polygon, Line, Ellipse, Point, Rect, RoundRect, Tween, QuadTree, GLShader, WebGLCompositor, Renderer, WebGLRenderer, CanvasRenderer, TextureAtlas, Renderable, Body, Bounds, Text, BitmapText, BitmapTextData, ColorLayer, ImageLayer, Sprite, NineSliceSprite, UIBaseElement, UITextButton, UISpriteElement, Collectable, Trigger, Light2d, Draggable, DropTarget, TMXRenderer, TMXOrthogonalRenderer, TMXIsometricRenderer, TMXHexagonalRenderer, TMXStaggeredRenderer, Tile, TMXTileset, TMXTilesetGroup, TMXTileMap, TMXLayer, Pointer, Stage, Camera2d, Container, World, ParticleEmitter, ParticleEmitterSettings, Particle, Entity };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "melonjs",
-  "version": "14.1.1",
+  "version": "14.2.0",
   "description": "melonJS Game Engine",
   "homepage": "http://www.melonjs.org/",
   "type": "module",
@@ -39,12 +39,12 @@
   },
   "main": "dist/melonjs.module.js",
   "module": "dist/melonjs.module.js",
-  "types": "dist/melonjs.module.d.ts",
+  "types": "dist/types/index.d.ts",
   "sideEffects": false,
   "files": [
     "dist/melonjs.mjs",
     "dist/melonjs.module.js",
-    "dist/melonjs.module.d.ts",
+    "dist/types/index.d.ts",
     "src/",
     "package.json",
     "README.md",
@@ -53,43 +53,43 @@
   ],
   "dependencies": {
     "@teppeis/multimaps": "^2.0.0",
-    "core-js": "^3.26.0",
+    "core-js": "^3.27.0",
     "earcut": "2.2.4",
-    "eventemitter3": "^4.0.7",
+    "eventemitter3": "^5.0.0",
     "howler": "2.2.3"
   },
   "devDependencies": {
     "@babel/eslint-parser": "^7.19.1",
     "@babel/plugin-syntax-import-assertions": "^7.20.0",
-    "@fastify/static": "^6.5.0",
+    "@fastify/static": "^6.6.0",
     "@melonjs/webdoc-theme": "^1.1.1",
-    "@rollup/plugin-commonjs": "^23.0.2",
+    "@rollup/plugin-commonjs": "^24.0.0",
     "@rollup/plugin-image": "^3.0.1",
     "@rollup/plugin-node-resolve": "^15.0.1",
-    "@rollup/plugin-replace": "^5.0.1",
+    "@rollup/plugin-replace": "^5.0.2",
     "@types/offscreencanvas": "^2019.7.0",
     "@webdoc/cli": "^2.2.0",
-    "chromedriver": "^107.0.3",
+    "chromedriver": "^108.0.0",
     "cross-env": "^7.0.3",
     "del-cli": "^5.0.0",
-    "eslint": "^8.26.0",
-    "eslint-plugin-jsdoc": "^39.6.2",
-    "expect": "^29.2.2",
+    "eslint": "^8.30.0",
+    "eslint-plugin-jsdoc": "^39.6.4",
+    "expect": "^29.3.1",
     "expect-mocha-image-snapshot": "^2.0.14",
-    "fastify": "^4.9.1",
-    "mocha": "^10.1.0",
+    "fastify": "^4.10.2",
+    "mocha": "^10.2.0",
     "npm-self-link": "^1.1.7",
-    "puppeteer": "^19.2.1",
-    "rollup": "^3.2.5",
+    "puppeteer": "^19.4.1",
+    "rollup": "^3.8.1",
     "rollup-plugin-bundle-size": "^1.0.3",
     "rollup-plugin-string": "^3.0.0",
-    "terser": "^5.15.1",
-    "typescript": "^4.8.4"
+    "terser": "^5.16.1",
+    "typescript": "^4.9.4"
   },
   "scripts": {
     "build": "npm run lint && rollup -c --silent",
     "dist": " npm run build && mkdirp dist && cp -fR build/*.* dist/ && npm run types",
-    "lint": "eslint src/** rollup.config.js",
+    "lint": "eslint src/** rollup.config.mjs",
     "pretest": "cp -f ./build/melonjs.module.js ./tests/browser/public/lib",
     "test": "npm run test-node && mocha ./tests/browser/spec/*.js --reporter spec --bail --timeout 10000",
     "test-node": "node build/melonjs.module.js",
@@ -99,6 +99,6 @@
     "serve": "python3 -m http.server",
     "prepublishOnly": "npm run dist && npm run test",
     "clean": "del-cli --force build/*.* dist/*.* docs",
-    "types": "tsc src/index.js --declaration --allowJs --emitDeclarationOnly --outfile dist/melonjs.module.d.ts"
+    "types": "tsc"
   }
 }

package/src/application/application.js

@@ -12,9 +12,15 @@ import World from "./../physics/world.js";
  */
  export default class Application {
     constructor() {
+
+        /**
+         * the parent HTML element holding the main canvas of this application
+         * @type {HTMLElement}
+         */
+        this.parentElement = undefined;
+
         /**
-         * a reference to the current active stage "default" camera
-         * @public
+         * the active stage "default" camera
          * @type {Camera2d}
          */
         this.viewport = undefined;
@@ -22,7 +28,6 @@ import World from "./../physics/world.js";
         /**
          * a reference to the game world, <br>
          * a world is a virtual environment containing all the game objects
-         * @public
          * @type {World}
          */
         this.world = undefined;
@@ -30,7 +35,6 @@ import World from "./../physics/world.js";
         /**
          * when true, all objects will be added under the root world container.<br>
          * When false, a `me.Container` object will be created for each corresponding groups
-         * @public
          * @type {boolean}
          * @default true
          */
@@ -39,7 +43,6 @@ import World from "./../physics/world.js";
         /**
          * Specify the property to be used when sorting renderables.
          * Accepted values : "x", "y", "z"
-         * @public
          * @type {string}
          * @default "z"
          */
@@ -50,13 +53,17 @@ import World from "./../physics/world.js";
          * Use this value to implement frame prediction in drawing events,
          * for creating smooth motion while running game update logic at
          * a lower fps.
-         * @public
          * @type {DOMHighResTimeStamp}
-         * @name lastUpdate
-         * @memberof Application
          */
         this.lastUpdate = 0;
 
+        /**
+         * true when this app instance has been initialized
+         * @type {boolean}
+         * @default false
+         */
+        this.isInitialized = false;
+
         // to know when we have to refresh the display
         this.isDirty = true;
 
@@ -89,6 +96,7 @@ import World from "./../physics/world.js";
         // set the reference to this application instance
         this.world.app = this;
         this.lastUpdate = globalThis.performance.now();
+        this.isInitialized = true;
         event.emit(event.GAME_INIT, this);
     }
 
@@ -140,12 +148,11 @@ import World from "./../physics/world.js";
     }
 
     /**
-     * Returns the parent container of the specified Child in the game world
-     * @param {Renderable} child
-     * @returns {Container}
+     * Returns the parent HTML Element holding the main canvas of this application
+     * @returns {HTMLElement}
      */
-    getParentContainer(child) {
-        return child.ancestor;
+    getParentElement() {
+        return this.parentElement;
     }
 
     /**

package/src/input/pointerevent.js

@@ -1,6 +1,6 @@
 import {preventDefault} from "./input.js";
 import {getBindingKey, triggerKeyEvent} from "./keyboard.js";
-import { renderer, scaleRatio, getParent } from "./../video/video.js";
+import { renderer } from "./../video/video.js";
 import { throttle } from "./../utils/function.js";
 import { remove } from "./../utils/array.js";
 import * as event from "./../system/event.js";
@@ -9,7 +9,6 @@ import pool from "./../system/pooling.js";
 import * as device from "./../system/device.js";
 import Pointer from "./pointer.js";
 import Rect from "./../geometries/rectangle.js";
-import Container from "./../renderable/container.js";
 import game from "./../game.js";
 
 /**
@@ -195,7 +194,7 @@ function enablePointerEvent() {
         if (device.hasPointerLockSupport) {
             document.addEventListener("pointerlockchange", () => {
                 // change the locked status accordingly
-                locked = document.pointerLockElement === getParent();
+                locked = document.pointerLockElement === game.getParentElement();
                 // emit the corresponding internal event
                 event.emit(event.POINTERLOCKCHANGE, locked);
             }, true);
@@ -287,7 +286,7 @@ function dispatchEvent(normalizedEvents) {
         }
 
         // fetch valid candiates from the game world container
-        var candidates = game.world.broadphase.retrieve(currentPointer, Container.prototype._sortReverseZ);
+        var candidates = game.world.broadphase.retrieve(currentPointer, game.world._sortReverseZ);
 
         // add the main game viewport to the list of candidates
         candidates = candidates.concat([ game.viewport ]);
@@ -560,7 +559,7 @@ export function globalToLocal(x, y, v) {
     var pixelRatio = globalThis.devicePixelRatio || 1;
     x -= rect.left + (globalThis.pageXOffset || 0);
     y -= rect.top + (globalThis.pageYOffset || 0);
-    var scale = scaleRatio;
+    var scale = renderer.scaleRatio;
     if (scale.x !== 1.0 || scale.y !== 1.0) {
         x /= scale.x;
         y /= scale.y;
@@ -786,7 +785,7 @@ export function releaseAllPointerEvents(region) {
  */
 export function requestPointerLock() {
     if (device.hasPointerLockSupport) {
-        var element = getParent();
+        var element = game.getParentElement();
         element.requestPointerLock();
         return true;
     }

package/src/physics/detector.js

@@ -25,8 +25,6 @@ let globalResponse = new ResponseObject();
 /**
  * a function used to determine if two objects should collide (based on both respective objects collision mask and type).<br>
  * you can redefine this function if you need any specific rules over what should collide with what.
- * @name shouldCollide
- * @memberof collision
  * @ignore
  * @param {Renderable} a - a reference to the object A.
  * @param {Renderable} b - a reference to the object B.
@@ -50,7 +48,6 @@ function shouldCollide(a, b) {
 
 /**
  * find all the collisions for the specified object
- * @name collisionCheck
  * @ignore
  * @param {Renderable} objA - object to be tested for collision
  * @param {ResponseObject} [response] - a user defined response object that will be populated if they intersect.
@@ -113,7 +110,6 @@ export function collisionCheck(objA, response = globalResponse) {
 
 /**
  * Checks for object colliding with the given line
- * @name rayCast
  * @ignore
  * @param {Line} line - line to be tested for collision
  * @param {Array.<Renderable>} [result] - a user defined array that will be populated with intersecting physic objects.

package/src/plugin/plugin.js

@@ -122,7 +122,7 @@ export var plugin = {
         }
 
         // compatibility testing
-        if (utils.checkVersion(instance.version) > 0) {
+        if (utils.checkVersion(instance.version, version) > 0) {
             throw new Error("Plugin version mismatch, expected: " + instance.version + ", got: " + version);
         }
 

package/src/system/device.js

@@ -462,7 +462,7 @@ export function enableSwipe(enable) {
  */
 export function isFullscreen() {
     if (hasFullscreenSupport) {
-        return !!(prefixed("fullscreenElement", document) || document.mozFullScreenElement);
+        return !!(prefixed("fullscreenElement", globalThis.document) || globalThis.document.mozFullScreenElement);
     } else {
         return false;
     }
@@ -473,7 +473,7 @@ export function isFullscreen() {
  * @function requestFullscreen
  * @memberof device
  * @public
- * @param {object} [element=default canvas object] - the element to be set in full-screen mode.
+ * @param {Element} [element] - the element to be set in full-screen mode.
  * @example
  * // add a keyboard shortcut to toggle Fullscreen mode on/off
  * me.input.bindKey(me.input.KEY.F, "toggleFullscreen");
@@ -502,7 +502,7 @@ export function requestFullscreen(element) {
  */
 export function exitFullscreen() {
     if (hasFullscreenSupport && isFullscreen()) {
-        document.exitFullscreen();
+        globalThis.document.exitFullscreen();
     }
 }
 
@@ -655,7 +655,7 @@ export function getElement(element) {
 
     if (element !== "undefined") {
         if (typeof element === "string") {
-            target = document.getElementById(element);
+            target = globalThis.document.getElementById(element);
         } else if (typeof element === "object" && element.nodeType === Node.ELEMENT_NODE) {
             target = element;
         }
@@ -664,7 +664,7 @@ export function getElement(element) {
     // fallback, if invalid target or non HTMLElement object
     if (!target)  {
         //default to document.body
-        target = document.body;
+        target = globalThis.document.body;
     }
 
     return target;
@@ -681,7 +681,7 @@ export function getElement(element) {
  * @returns {DOMRect} the size and position of the element relatively to the viewport
  */
 export function getElementBounds(element) {
-    if (typeof element === "object" && element !== document.body && typeof element.getBoundingClientRect !== "undefined") {
+    if (typeof element === "object" && element !== globalThis.document.body && typeof element.getBoundingClientRect !== "undefined") {
         return element.getBoundingClientRect();
     } else {
         domRect.width = domRect.right = globalThis.innerWidth;
@@ -716,7 +716,7 @@ export function getParentBounds(element) {
 export function isWebGLSupported(options) {
     let _supported = false;
     try {
-        let canvas = document.createElement("canvas");
+        let canvas = globalThis.document.createElement("canvas");
         let ctxOptions = {
             stencil: true,
             failIfMajorPerformanceCaveat: options.failIfMajorPerformanceCaveat

package/src/system/dom.js

@@ -1,4 +1,5 @@
 import * as event from "./event.js";
+import { nodeJS } from "./platform.js";
 
 // track if DOMContentLoaded was called already
 let readyBound = false;
@@ -51,7 +52,7 @@ export function DOMContentLoaded(fn) {
         // bind dom load event if not done yet
         if (!readyBound) {
             // directly call domReady if document is already "ready"
-            if (((typeof process !== "undefined") && (process.release.name === "node")) || (typeof globalThis.document !== "undefined" && globalThis.document.readyState === "complete")) {
+            if (nodeJS === true || (typeof globalThis.document !== "undefined" && globalThis.document.readyState === "complete")) {
                 // defer the fn call to ensure our script is fully loaded
                 globalThis.setTimeout(_domReady, 0);
             }

package/src/utils/utils.js

@@ -3,9 +3,6 @@ import * as arrayUtils from "./array.js";
 import * as fileUtils from "./file.js";
 import * as stringUtils from "./string.js";
 import * as fnUtils from "./function.js";
-import { createCanvas } from "./../video/video.js";
-import CanvasRenderer from "./../video/canvas/canvas_renderer.js";
-import { version } from "./../index.js";
 
 /**
  * a collection of utility functions
@@ -24,35 +21,13 @@ var utils = {
     string : stringUtils,
     function : fnUtils,
 
-    /**
-     * Get image pixels
-     * @public
-     * @memberof utils
-     * @name getPixels
-     * @param {HTMLImageElement|HTMLCanvasElement} image - Image to read
-     * @returns {ImageData} ImageData object
-     */
-    getPixels : function (image) {
-        if (image instanceof HTMLImageElement) {
-            var _context = CanvasRenderer.getContext2d(
-                createCanvas(image.width, image.height)
-            );
-            _context.drawImage(image, 0, 0);
-            return _context.getImageData(0, 0, image.width, image.height);
-        }
-        else {
-            // canvas !
-            return image.getContext("2d").getImageData(0, 0, image.width, image.height);
-        }
-    },
-
     /**
      * Compare two version strings
      * @public
      * @memberof utils
      * @name checkVersion
-     * @param {string} first - First version string to compare
-     * @param {string} [second=version] - Second version string to compare
+     * @param {string} first - Ffrst version string to compare
+     * @param {string} second - second version string to compare
      * @returns {number} comparison result <br>&lt; 0 : first &lt; second<br>
      * 0 : first == second<br>
      * &gt; 0 : first &gt; second
@@ -63,7 +38,7 @@ var utils = {
      *     );
      * }
      */
-    checkVersion : function (first, second = version) {
+    checkVersion : function (first, second) {
         var a = first.split(".");
         var b = second.split(".");
         var len = Math.min(a.length, b.length);

package/src/video/renderer.js

@@ -1,8 +1,8 @@
 import Color from "./../math/color.js";
 import Matrix3d from "./../math/matrix3.js";
-import { createCanvas, renderer } from "./video.js";
+import { createCanvas } from "./video.js";
 import * as event from "./../system/event.js";
-import * as device from "./../system/device.js";
+import { platform } from "../system/device.js";
 import { setPrefixed } from "./../utils/agent.js";
 import Rect from "./../geometries/rectangle.js";
 import RoundRect from "./../geometries/roundrect.js";
@@ -11,6 +11,7 @@ import Polygon from "./../geometries/poly.js";
 import Line from "./../geometries/line.js";
 import Bounds from "./../physics/bounds.js";
 import Path2D from "./../geometries/path2d.js";
+import Vector2d from "../math/vector2.js";
 import Point from "../geometries/point.js";
 
 /**
@@ -41,6 +42,20 @@ import Point from "../geometries/point.js";
          */
         this.settings = options;
 
+        /**
+         * the requested video size ratio
+         * @public
+         * @type {Number}
+         */
+        this.designRatio = this.settings.width / this.settings.height;
+
+        /**
+         * the scaling ratio to be applied to the main canvas
+         * @type {Vector2d}
+         * @default <1,1>
+         */
+        this.scaleRatio = new Vector2d(this.settings.scale, this.settings.scale);
+
         /**
          * true if the current rendering context is valid
          * @default true
@@ -70,7 +85,7 @@ import Point from "../geometries/point.js";
         this.currentBlendMode = "none";
 
         // create the main screen canvas
-        if (device.platform.ejecta === true) {
+        if (platform.ejecta === true) {
             // a main canvas is already automatically created by Ejecta
             this.canvas = document.getElementById("canvas");
         } else if (typeof globalThis.canvas !== "undefined") {
@@ -94,9 +109,9 @@ import Point from "../geometries/point.js";
         // default uvOffset
         this.uvOffset = 0;
 
-        // reset the instantiated renderer on game reset
+        // reset the renderer on game reset
         event.on(event.GAME_RESET, () => {
-            renderer.reset();
+            this.reset();
         });
     }
 
@@ -323,8 +338,6 @@ import Point from "../geometries/point.js";
 
     /**
      * fill the given shape
-     * @name fill
-     * @memberof Renderer
      * @param {Rect|RoundRect|Polygon|Line|Ellipse} shape - a shape object to fill
      */
     fill(shape) {

package/src/video/texture/canvas_texture.js

@@ -1,5 +1,6 @@
 import { createCanvas } from "./../video.js";
 import { setPrefixed } from "./../../utils/agent.js";
+import { clamp } from "../../math/math.js";
 
 // default canvas settings
 var defaultAttributes = {
@@ -97,6 +98,24 @@ class CanvasTexture {
         this.canvas.height = Math.round(height);
     }
 
+    /**
+     * Returns an ImageData object representing the underlying pixel data for a specified portion of this canvas texture
+     * @param {number} x - The x-axis coordinate of the top-left corner of the rectangle from which the ImageData will be extracted
+     * @param {number} y - The y-axis coordinate of the top-left corner of the rectangle from which the ImageData will be extracted
+     * @param {number} width - The width of the rectangle from which the ImageData will be extracted. Positive values are to the right, and negative to the left
+     * @param {number} height - The height of the rectangle from which the ImageData will be extracted. Positive values are down, and negative are up
+     * @return {ImageData} The ImageData extracted from this CanvasTexture.
+     */
+    getImageData(x, y, width, height) {
+        // clamp values
+        x = clamp(Math.floor(x), 0, this.canvas.width - 1);
+        y = clamp(Math.floor(y), 0, this.canvas.height - 1);
+        width = clamp(width, 1, this.canvas.width - x);
+        height = clamp(height, 1, this.canvas.height - y);
+        // return imageData
+        return this.context.getImageData(x, y, width, height);
+    }
+
     /**
      * @ignore
      */