melonjs 10.2.0 → 10.3.0

package/src/video/canvas/canvas_renderer.js

@@ -1,7 +1,7 @@
 import Color from "./../../math/color.js";
 import Renderer from "./../renderer.js";
 import TextureCache from "./../texture_cache.js";
-import Ellipse from "./../../shapes/ellipse.js";
+import Ellipse from "./../../geometries/ellipse.js";
 import { createCanvas } from "./../video.js";
 
 
@@ -10,20 +10,19 @@ import { createCanvas } from "./../video.js";
  * @classdesc
  * a canvas renderer object
  * @class CanvasRenderer
- * @extends me.Renderer
- * @memberOf me
- * @constructor
- * @param {Object} options The renderer parameters
- * @param {Number} options.width The width of the canvas without scaling
- * @param {Number} options.height The height of the canvas without scaling
+ * @augments me.Renderer
+ * @memberof me
+ * @param {object} options The renderer parameters
+ * @param {number} options.width The width of the canvas without scaling
+ * @param {number} options.height The height of the canvas without scaling
  * @param {HTMLCanvasElement} [options.canvas] The html canvas to draw to on screen
- * @param {Boolean} [options.doubleBuffering=false] Whether to enable double buffering
- * @param {Boolean} [options.antiAlias=false] Whether to enable anti-aliasing
- * @param {Boolean} [options.transparent=false] Whether to enable transparency on the canvas (performance hit when enabled)
- * @param {Boolean} [options.subPixel=false] Whether to enable subpixel renderering (performance hit when enabled)
- * @param {Boolean} [options.textureSeamFix=true] enable the texture seam fix when rendering Tile when antiAlias is off for the canvasRenderer
- * @param {Number} [options.zoomX=width] The actual width of the canvas with scaling applied
- * @param {Number} [options.zoomY=height] The actual height of the canvas with scaling applied
+ * @param {boolean} [options.doubleBuffering=false] Whether to enable double buffering
+ * @param {boolean} [options.antiAlias=false] Whether to enable anti-aliasing
+ * @param {boolean} [options.transparent=false] Whether to enable transparency on the canvas (performance hit when enabled)
+ * @param {boolean} [options.subPixel=false] Whether to enable subpixel renderering (performance hit when enabled)
+ * @param {boolean} [options.textureSeamFix=true] enable the texture seam fix when rendering Tile when antiAlias is off for the canvasRenderer
+ * @param {number} [options.zoomX=width] The actual width of the canvas with scaling applied
+ * @param {number} [options.zoomY=height] The actual height of the canvas with scaling applied
  */
 class CanvasRenderer extends Renderer {
 
@@ -63,7 +62,7 @@ class CanvasRenderer extends Renderer {
     /**
      * Reset context state
      * @name reset
-     * @memberOf me.CanvasRenderer.prototype
+     * @memberof me.CanvasRenderer.prototype
      * @function
      */
     reset() {
@@ -74,7 +73,7 @@ class CanvasRenderer extends Renderer {
     /**
      * Reset the canvas transform to identity
      * @name resetTransform
-     * @memberOf me.CanvasRenderer.prototype
+     * @memberof me.CanvasRenderer.prototype
      * @function
      */
     resetTransform() {
@@ -84,10 +83,10 @@ class CanvasRenderer extends Renderer {
     /**
      * Set a blend mode for the given context
      * @name setBlendMode
-     * @memberOf me.CanvasRenderer.prototype
+     * @memberof me.CanvasRenderer.prototype
      * @function
-     * @param {String} [mode="normal"] blend mode : "normal", "multiply"
-     * @param {Context2d} [context]
+     * @param {string} [mode="normal"] blend mode : "normal", "multiply"
+     * @param {CanvasRenderingContext2D} [context]
      */
     setBlendMode(mode, context) {
         context = context || this.getContext();
@@ -113,7 +112,7 @@ class CanvasRenderer extends Renderer {
     /**
      * prepare the framebuffer for drawing a new frame
      * @name clear
-     * @memberOf me.CanvasRenderer.prototype
+     * @memberof me.CanvasRenderer.prototype
      * @function
      */
     clear() {
@@ -125,7 +124,7 @@ class CanvasRenderer extends Renderer {
     /**
      * render the main framebuffer on screen
      * @name flush
-     * @memberOf me.CanvasRenderer.prototype
+     * @memberof me.CanvasRenderer.prototype
      * @function
      */
     flush() {
@@ -137,16 +136,16 @@ class CanvasRenderer extends Renderer {
     /**
      * Clears the main framebuffer with the given color
      * @name clearColor
-     * @memberOf me.CanvasRenderer.prototype
+     * @memberof me.CanvasRenderer.prototype
      * @function
-     * @param {me.Color|String} color CSS color.
-     * @param {Boolean} [opaque=false] Allow transparency [default] or clear the surface completely [true]
+     * @param {me.Color|string} [color="#000000"] CSS color.
+     * @param {boolean} [opaque=false] Allow transparency [default] or clear the surface completely [true]
      */
-    clearColor(col, opaque) {
+    clearColor(color = "#000000", opaque) {
         this.save();
         this.resetTransform();
         this.backBufferContext2D.globalCompositeOperation = opaque ? "copy" : "source-over";
-        this.backBufferContext2D.fillStyle = (col instanceof Color) ? col.toRGBA() : col;
+        this.backBufferContext2D.fillStyle = (color instanceof Color) ? color.toRGBA() : color;
         this.fillRect(0, 0, this.backBufferCanvas.width, this.backBufferCanvas.height);
         this.restore();
     }
@@ -154,12 +153,12 @@ class CanvasRenderer extends Renderer {
     /**
      * Erase the pixels in the given rectangular area by setting them to transparent black (rgba(0,0,0,0)).
      * @name clearRect
-     * @memberOf me.CanvasRenderer.prototype
+     * @memberof me.CanvasRenderer.prototype
      * @function
-     * @param {Number} x x axis of the coordinate for the rectangle starting point.
-     * @param {Number} y y axis of the coordinate for the rectangle starting point.
-     * @param {Number} width The rectangle's width.
-     * @param {Number} height The rectangle's height.
+     * @param {number} x x axis of the coordinate for the rectangle starting point.
+     * @param {number} y y axis of the coordinate for the rectangle starting point.
+     * @param {number} width The rectangle's width.
+     * @param {number} height The rectangle's height.
      */
     clearRect(x, y, width, height) {
         this.backBufferContext2D.clearRect(x, y, width, height);
@@ -168,11 +167,11 @@ class CanvasRenderer extends Renderer {
     /**
      * Create a pattern with the specified repetition
      * @name createPattern
-     * @memberOf me.CanvasRenderer.prototype
+     * @memberof me.CanvasRenderer.prototype
      * @function
-     * @param {image} image Source image
-     * @param {String} repeat Define how the pattern should be repeated
-     * @return {CanvasPattern}
+     * @param {Image} image Source image
+     * @param {string} repeat Define how the pattern should be repeated
+     * @returns {CanvasPattern}
      * @see me.ImageLayer#repeat
      * @example
      * var tileable   = renderer.createPattern(image, "repeat");
@@ -187,17 +186,17 @@ class CanvasRenderer extends Renderer {
     /**
      * Draw an image onto the main using the canvas api
      * @name drawImage
-     * @memberOf me.CanvasRenderer.prototype
+     * @memberof me.CanvasRenderer.prototype
      * @function
      * @param {Image} image An element to draw into the context. The specification permits any canvas image source (CanvasImageSource), specifically, a CSSImageValue, an HTMLImageElement, an SVGImageElement, an HTMLVideoElement, an HTMLCanvasElement, an ImageBitmap, or an OffscreenCanvas.
-     * @param {Number} sx The X coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context.
-     * @param {Number} sy The Y coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context.
-     * @param {Number} sw The width of the sub-rectangle of the source image to draw into the destination context. If not specified, the entire rectangle from the coordinates specified by sx and sy to the bottom-right corner of the image is used.
-     * @param {Number} sh The height of the sub-rectangle of the source image to draw into the destination context.
-     * @param {Number} dx The X coordinate in the destination canvas at which to place the top-left corner of the source image.
-     * @param {Number} dy The Y coordinate in the destination canvas at which to place the top-left corner of the source image.
-     * @param {Number} dWidth The width to draw the image in the destination canvas. This allows scaling of the drawn image. If not specified, the image is not scaled in width when drawn.
-     * @param {Number} dHeight The height to draw the image in the destination canvas. This allows scaling of the drawn image. If not specified, the image is not scaled in height when drawn.
+     * @param {number} sx The X coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context.
+     * @param {number} sy The Y coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context.
+     * @param {number} sw The width of the sub-rectangle of the source image to draw into the destination context. If not specified, the entire rectangle from the coordinates specified by sx and sy to the bottom-right corner of the image is used.
+     * @param {number} sh The height of the sub-rectangle of the source image to draw into the destination context.
+     * @param {number} dx The X coordinate in the destination canvas at which to place the top-left corner of the source image.
+     * @param {number} dy The Y coordinate in the destination canvas at which to place the top-left corner of the source image.
+     * @param {number} dw The width to draw the image in the destination canvas. This allows scaling of the drawn image. If not specified, the image is not scaled in width when drawn.
+     * @param {number} dh The height to draw the image in the destination canvas. This allows scaling of the drawn image. If not specified, the image is not scaled in height when drawn.
      * @example
      * // Position the image on the canvas:
      * renderer.drawImage(image, dx, dy);
@@ -250,13 +249,13 @@ class CanvasRenderer extends Renderer {
     /**
      * Draw a pattern within the given rectangle.
      * @name drawPattern
-     * @memberOf me.CanvasRenderer.prototype
+     * @memberof me.CanvasRenderer.prototype
      * @function
      * @param {CanvasPattern} pattern Pattern object
-     * @param {Number} x
-     * @param {Number} y
-     * @param {Number} width
-     * @param {Number} height
+     * @param {number} x
+     * @param {number} y
+     * @param {number} width
+     * @param {number} height
      * @see me.CanvasRenderer#createPattern
      */
     drawPattern(pattern, x, y, width, height) {
@@ -273,15 +272,15 @@ class CanvasRenderer extends Renderer {
     /**
      * Stroke an arc at the specified coordinates with given radius, start and end points
      * @name strokeArc
-     * @memberOf me.CanvasRenderer.prototype
+     * @memberof me.CanvasRenderer.prototype
      * @function
-     * @param {Number} x arc center point x-axis
-     * @param {Number} y arc center point y-axis
-     * @param {Number} radius
-     * @param {Number} start start angle in radians
-     * @param {Number} end end angle in radians
-     * @param {Boolean} [antiClockwise=false] draw arc anti-clockwise
-     * @param {Boolean} [fill=false] also fill the shape with the current color if true
+     * @param {number} x arc center point x-axis
+     * @param {number} y arc center point y-axis
+     * @param {number} radius
+     * @param {number} start start angle in radians
+     * @param {number} end end angle in radians
+     * @param {boolean} [antiClockwise=false] draw arc anti-clockwise
+     * @param {boolean} [fill=false] also fill the shape with the current color if true
      */
     strokeArc(x, y, radius, start, end, antiClockwise, fill = false) {
         var context = this.backBufferContext2D;
@@ -300,14 +299,14 @@ class CanvasRenderer extends Renderer {
     /**
      * Fill an arc at the specified coordinates with given radius, start and end points
      * @name fillArc
-     * @memberOf me.CanvasRenderer.prototype
+     * @memberof me.CanvasRenderer.prototype
      * @function
-     * @param {Number} x arc center point x-axis
-     * @param {Number} y arc center point y-axis
-     * @param {Number} radius
-     * @param {Number} start start angle in radians
-     * @param {Number} end end angle in radians
-     * @param {Boolean} [antiClockwise=false] draw arc anti-clockwise
+     * @param {number} x arc center point x-axis
+     * @param {number} y arc center point y-axis
+     * @param {number} radius
+     * @param {number} start start angle in radians
+     * @param {number} end end angle in radians
+     * @param {boolean} [antiClockwise=false] draw arc anti-clockwise
      */
     fillArc(x, y, radius, start, end, antiClockwise) {
         this.strokeArc(x, y, radius, start, end, antiClockwise || false, true);
@@ -316,13 +315,13 @@ class CanvasRenderer extends Renderer {
     /**
      * Stroke an ellipse at the specified coordinates with given radius
      * @name strokeEllipse
-     * @memberOf me.CanvasRenderer.prototype
+     * @memberof me.CanvasRenderer.prototype
      * @function
-     * @param {Number} x ellipse center point x-axis
-     * @param {Number} y ellipse center point y-axis
-     * @param {Number} w horizontal radius of the ellipse
-     * @param {Number} h vertical radius of the ellipse
-     * @param {Boolean} [fill=false] also fill the shape with the current color if true
+     * @param {number} x ellipse center point x-axis
+     * @param {number} y ellipse center point y-axis
+     * @param {number} w horizontal radius of the ellipse
+     * @param {number} h vertical radius of the ellipse
+     * @param {boolean} [fill=false] also fill the shape with the current color if true
      */
     strokeEllipse(x, y, w, h, fill = false) {
         var context = this.backBufferContext2D;
@@ -359,12 +358,12 @@ class CanvasRenderer extends Renderer {
     /**
      * Fill an ellipse at the specified coordinates with given radius
      * @name fillEllipse
-     * @memberOf me.CanvasRenderer.prototype
+     * @memberof me.CanvasRenderer.prototype
      * @function
-     * @param {Number} x ellipse center point x-axis
-     * @param {Number} y ellipse center point y-axis
-     * @param {Number} w horizontal radius of the ellipse
-     * @param {Number} h vertical radius of the ellipse
+     * @param {number} x ellipse center point x-axis
+     * @param {number} y ellipse center point y-axis
+     * @param {number} w horizontal radius of the ellipse
+     * @param {number} h vertical radius of the ellipse
      */
     fillEllipse(x, y, w, h) {
         this.strokeEllipse(x, y, w, h, true);
@@ -373,12 +372,12 @@ class CanvasRenderer extends Renderer {
     /**
      * Stroke a line of the given two points
      * @name strokeLine
-     * @memberOf me.CanvasRenderer.prototype
+     * @memberof me.CanvasRenderer.prototype
      * @function
-     * @param {Number} startX the start x coordinate
-     * @param {Number} startY the start y coordinate
-     * @param {Number} endX the end x coordinate
-     * @param {Number} endY the end y coordinate
+     * @param {number} startX the start x coordinate
+     * @param {number} startY the start y coordinate
+     * @param {number} endX the end x coordinate
+     * @param {number} endY the end y coordinate
      */
     strokeLine(startX, startY, endX, endY) {
         var context = this.backBufferContext2D;
@@ -397,12 +396,12 @@ class CanvasRenderer extends Renderer {
     /**
      * Fill a line of the given two points
      * @name fillLine
-     * @memberOf me.CanvasRenderer.prototype
+     * @memberof me.CanvasRenderer.prototype
      * @function
-     * @param {Number} startX the start x coordinate
-     * @param {Number} startY the start y coordinate
-     * @param {Number} endX the end x coordinate
-     * @param {Number} endY the end y coordinate
+     * @param {number} startX the start x coordinate
+     * @param {number} startY the start y coordinate
+     * @param {number} endX the end x coordinate
+     * @param {number} endY the end y coordinate
      */
     fillLine(startX, startY, endX, endY) {
         this.strokeLine(startX, startY, endX, endY);
@@ -411,10 +410,10 @@ class CanvasRenderer extends Renderer {
     /**
      * Stroke the given me.Polygon on the screen
      * @name strokePolygon
-     * @memberOf me.CanvasRenderer.prototype
+     * @memberof me.CanvasRenderer.prototype
      * @function
      * @param {me.Polygon} poly the shape to draw
-     * @param {Boolean} [fill=false] also fill the shape with the current color if true
+     * @param {boolean} [fill=false] also fill the shape with the current color if true
      */
     strokePolygon(poly, fill = false) {
         var context = this.backBufferContext2D;
@@ -441,7 +440,7 @@ class CanvasRenderer extends Renderer {
     /**
      * Fill the given me.Polygon on the screen
      * @name fillPolygon
-     * @memberOf me.CanvasRenderer.prototype
+     * @memberof me.CanvasRenderer.prototype
      * @function
      * @param {me.Polygon} poly the shape to draw
      */
@@ -452,13 +451,13 @@ class CanvasRenderer extends Renderer {
     /**
      * Stroke a rectangle at the specified coordinates
      * @name strokeRect
-     * @memberOf me.CanvasRenderer.prototype
+     * @memberof me.CanvasRenderer.prototype
      * @function
-     * @param {Number} x
-     * @param {Number} y
-     * @param {Number} width
-     * @param {Number} height
-     * @param {Boolean} [fill=false] also fill the shape with the current color if true
+     * @param {number} x
+     * @param {number} y
+     * @param {number} width
+     * @param {number} height
+     * @param {boolean} [fill=false] also fill the shape with the current color if true
      */
     strokeRect(x, y, width, height, fill = false) {
         if (fill === true ) {
@@ -475,12 +474,12 @@ class CanvasRenderer extends Renderer {
     /**
      * Draw a filled rectangle at the specified coordinates
      * @name fillRect
-     * @memberOf me.CanvasRenderer.prototype
+     * @memberof me.CanvasRenderer.prototype
      * @function
-     * @param {Number} x
-     * @param {Number} y
-     * @param {Number} width
-     * @param {Number} height
+     * @param {number} x
+     * @param {number} y
+     * @param {number} width
+     * @param {number} height
      */
     fillRect(x, y, width, height) {
         if (this.backBufferContext2D.globalAlpha < 1 / 255) {
@@ -494,9 +493,9 @@ class CanvasRenderer extends Renderer {
     /**
      * return a reference to the system 2d Context
      * @name getContext
-     * @memberOf me.CanvasRenderer.prototype
+     * @memberof me.CanvasRenderer.prototype
      * @function
-     * @return {CanvasRenderingContext2D}
+     * @returns {CanvasRenderingContext2D}
      */
     getContext() {
         return this.backBufferContext2D;
@@ -514,7 +513,7 @@ class CanvasRenderer extends Renderer {
     /**
      * save the canvas context
      * @name save
-     * @memberOf me.CanvasRenderer.prototype
+     * @memberof me.CanvasRenderer.prototype
      * @function
      */
     save() {
@@ -524,7 +523,7 @@ class CanvasRenderer extends Renderer {
     /**
      * restores the canvas context
      * @name restore
-     * @memberOf me.CanvasRenderer.prototype
+     * @memberof me.CanvasRenderer.prototype
      * @function
      */
     restore() {
@@ -539,9 +538,9 @@ class CanvasRenderer extends Renderer {
     /**
      * rotates the canvas context
      * @name rotate
-     * @memberOf me.CanvasRenderer.prototype
+     * @memberof me.CanvasRenderer.prototype
      * @function
-     * @param {Number} angle in radians
+     * @param {number} angle in radians
      */
     rotate(angle) {
         this.backBufferContext2D.rotate(angle);
@@ -550,10 +549,10 @@ class CanvasRenderer extends Renderer {
     /**
      * scales the canvas context
      * @name scale
-     * @memberOf me.CanvasRenderer.prototype
+     * @memberof me.CanvasRenderer.prototype
      * @function
-     * @param {Number} x
-     * @param {Number} y
+     * @param {number} x
+     * @param {number} y
      */
     scale(x, y) {
         this.backBufferContext2D.scale(x, y);
@@ -563,9 +562,9 @@ class CanvasRenderer extends Renderer {
      * Set the current fill & stroke style color.
      * By default, or upon reset, the value is set to #000000.
      * @name setColor
-     * @memberOf me.CanvasRenderer.prototype
+     * @memberof me.CanvasRenderer.prototype
      * @function
-     * @param {Color|String} color css color value
+     * @param {me.Color|string} color css color value
      */
     setColor(color) {
         this.backBufferContext2D.strokeStyle =
@@ -579,20 +578,20 @@ class CanvasRenderer extends Renderer {
     /**
      * Set the global alpha on the canvas context
      * @name setGlobalAlpha
-     * @memberOf me.CanvasRenderer.prototype
+     * @memberof me.CanvasRenderer.prototype
      * @function
-     * @param {Number} alpha 0.0 to 1.0 values accepted.
+     * @param {number} alpha 0.0 to 1.0 values accepted.
      */
-    setGlobalAlpha(a) {
-        this.backBufferContext2D.globalAlpha = this.currentColor.glArray[3] = a;
+    setGlobalAlpha(alpha) {
+        this.backBufferContext2D.globalAlpha = this.currentColor.glArray[3] = alpha;
     }
 
     /**
      * Set the line width on the context
      * @name setLineWidth
-     * @memberOf me.CanvasRenderer.prototype
+     * @memberof me.CanvasRenderer.prototype
      * @function
-     * @param {Number} width Line width
+     * @param {number} width Line width
      */
     setLineWidth(width) {
         this.backBufferContext2D.lineWidth = width;
@@ -602,7 +601,7 @@ class CanvasRenderer extends Renderer {
      * Reset (overrides) the renderer transformation matrix to the
      * identity one, and then apply the given transformation matrix.
      * @name setTransform
-     * @memberOf me.CanvasRenderer.prototype
+     * @memberof me.CanvasRenderer.prototype
      * @function
      * @param {me.Matrix2d} mat2d Matrix to transform by
      */
@@ -614,7 +613,7 @@ class CanvasRenderer extends Renderer {
     /**
      * Multiply given matrix into the renderer tranformation matrix
      * @name transform
-     * @memberOf me.CanvasRenderer.prototype
+     * @memberof me.CanvasRenderer.prototype
      * @function
      * @param {me.Matrix2d} mat2d Matrix to transform by
      */
@@ -638,10 +637,10 @@ class CanvasRenderer extends Renderer {
     /**
      * Translates the context to the given position
      * @name translate
-     * @memberOf me.CanvasRenderer.prototype
+     * @memberof me.CanvasRenderer.prototype
      * @function
-     * @param {Number} x
-     * @param {Number} y
+     * @param {number} x
+     * @param {number} y
      */
     translate(x, y) {
         if (this.settings.subPixel === false) {
@@ -658,12 +657,12 @@ class CanvasRenderer extends Renderer {
      * and restore it (with the restore() method) any time in the future.
      * (<u>this is an experimental feature !</u>)
      * @name clipRect
-     * @memberOf me.CanvasRenderer.prototype
+     * @memberof me.CanvasRenderer.prototype
      * @function
-     * @param {Number} x
-     * @param {Number} y
-     * @param {Number} width
-     * @param {Number} height
+     * @param {number} x
+     * @param {number} y
+     * @param {number} width
+     * @param {number} height
      */
     clipRect(x, y, width, height) {
         var canvas = this.backBufferCanvas;
@@ -691,7 +690,7 @@ class CanvasRenderer extends Renderer {
      * So, if the renderable is larger than the mask, only the intersecting part of the renderable will be visible.
      * Mask are not preserved through renderer context save and restore.
      * @name setMask
-     * @memberOf me.CanvasRenderer.prototype
+     * @memberof me.CanvasRenderer.prototype
      * @function
      * @param {me.Rect|me.Polygon|me.Line|me.Ellipse} [mask] the shape defining the mask to be applied
      */
@@ -740,7 +739,7 @@ class CanvasRenderer extends Renderer {
      * disable (remove) the rendering mask set through setMask.
      * @name clearMask
      * @see me.CanvasRenderer#setMask
-     * @memberOf me.CanvasRenderer.prototype
+     * @memberof me.CanvasRenderer.prototype
      * @function
      */
     clearMask() {