melonjs 10.8.0 → 10.11.0

package/src/video/canvas/canvas_renderer.js

@@ -1,10 +1,12 @@
 import Color from "./../../math/color.js";
 import Renderer from "./../renderer.js";
-import TextureCache from "./../texture_cache.js";
+import TextureCache from "./../texture/cache.js";
 import Ellipse from "./../../geometries/ellipse.js";
+import RoundRect from "./../../geometries/roundrect.js";
+import Rect from "./../../geometries/rectangle.js";
+import Bounds from "./../../physics/bounds.js";
 import { createCanvas } from "./../video.js";
-
-
+import * as event from "./../../system/event.js";
 
 /**
  * @classdesc
@@ -71,8 +73,7 @@ class CanvasRenderer extends Renderer {
     /**
      * Reset context state
      * @name reset
-     * @memberof CanvasRenderer.prototype
-     * @function
+     * @memberof CanvasRenderer
      */
     reset() {
         super.reset();
@@ -82,8 +83,7 @@ class CanvasRenderer extends Renderer {
     /**
      * Reset the canvas transform to identity
      * @name resetTransform
-     * @memberof CanvasRenderer.prototype
-     * @function
+     * @memberof CanvasRenderer
      */
     resetTransform() {
         this.backBufferContext2D.setTransform(1, 0, 0, 1, 0, 0);
@@ -102,8 +102,7 @@ class CanvasRenderer extends Renderer {
      * <img src="images/screen-blendmode.png" width="510"/> <br>
      * @name setBlendMode
      * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation
-     * @memberof CanvasRenderer.prototype
-     * @function
+     * @memberof CanvasRenderer
      * @param {string} [mode="normal"] blend mode : "normal", "multiply", "lighter, "additive", "screen"
      * @param {CanvasRenderingContext2D} [context]
      */
@@ -140,8 +139,7 @@ class CanvasRenderer extends Renderer {
     /**
      * prepare the framebuffer for drawing a new frame
      * @name clear
-     * @memberof CanvasRenderer.prototype
-     * @function
+     * @memberof CanvasRenderer
      */
     clear() {
         if (this.settings.transparent) {
@@ -152,8 +150,7 @@ class CanvasRenderer extends Renderer {
     /**
      * render the main framebuffer on screen
      * @name flush
-     * @memberof CanvasRenderer.prototype
-     * @function
+     * @memberof CanvasRenderer
      */
     flush() {
         if (this.settings.doubleBuffering) {
@@ -164,8 +161,7 @@ class CanvasRenderer extends Renderer {
     /**
      * Clears the main framebuffer with the given color
      * @name clearColor
-     * @memberof CanvasRenderer.prototype
-     * @function
+     * @memberof CanvasRenderer
      * @param {Color|string} [color="#000000"] CSS color.
      * @param {boolean} [opaque=false] Allow transparency [default] or clear the surface completely [true]
      */
@@ -181,8 +177,7 @@ 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 CanvasRenderer.prototype
-     * @function
+     * @memberof CanvasRenderer
      * @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.
@@ -195,8 +190,7 @@ class CanvasRenderer extends Renderer {
     /**
      * Create a pattern with the specified repetition
      * @name createPattern
-     * @memberof CanvasRenderer.prototype
-     * @function
+     * @memberof CanvasRenderer
      * @param {Image} image Source image
      * @param {string} repeat Define how the pattern should be repeated
      * @returns {CanvasPattern}
@@ -214,8 +208,7 @@ class CanvasRenderer extends Renderer {
     /**
      * Draw an image onto the main using the canvas api
      * @name drawImage
-     * @memberof CanvasRenderer.prototype
-     * @function
+     * @memberof CanvasRenderer
      * @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.
@@ -278,8 +271,7 @@ class CanvasRenderer extends Renderer {
     /**
      * Draw a pattern within the given rectangle.
      * @name drawPattern
-     * @memberof CanvasRenderer.prototype
-     * @function
+     * @memberof CanvasRenderer
      * @param {CanvasPattern} pattern Pattern object
      * @param {number} x
      * @param {number} y
@@ -302,8 +294,7 @@ class CanvasRenderer extends Renderer {
     /**
      * Stroke an arc at the specified coordinates with given radius, start and end points
      * @name strokeArc
-     * @memberof CanvasRenderer.prototype
-     * @function
+     * @memberof CanvasRenderer
      * @param {number} x arc center point x-axis
      * @param {number} y arc center point y-axis
      * @param {number} radius
@@ -329,8 +320,7 @@ class CanvasRenderer extends Renderer {
     /**
      * Fill an arc at the specified coordinates with given radius, start and end points
      * @name fillArc
-     * @memberof CanvasRenderer.prototype
-     * @function
+     * @memberof CanvasRenderer
      * @param {number} x arc center point x-axis
      * @param {number} y arc center point y-axis
      * @param {number} radius
@@ -345,8 +335,7 @@ class CanvasRenderer extends Renderer {
     /**
      * Stroke an ellipse at the specified coordinates with given radius
      * @name strokeEllipse
-     * @memberof CanvasRenderer.prototype
-     * @function
+     * @memberof CanvasRenderer
      * @param {number} x ellipse center point x-axis
      * @param {number} y ellipse center point y-axis
      * @param {number} w horizontal radius of the ellipse
@@ -387,8 +376,7 @@ class CanvasRenderer extends Renderer {
     /**
      * Fill an ellipse at the specified coordinates with given radius
      * @name fillEllipse
-     * @memberof CanvasRenderer.prototype
-     * @function
+     * @memberof CanvasRenderer
      * @param {number} x ellipse center point x-axis
      * @param {number} y ellipse center point y-axis
      * @param {number} w horizontal radius of the ellipse
@@ -401,8 +389,7 @@ class CanvasRenderer extends Renderer {
     /**
      * Stroke a line of the given two points
      * @name strokeLine
-     * @memberof CanvasRenderer.prototype
-     * @function
+     * @memberof CanvasRenderer
      * @param {number} startX the start x coordinate
      * @param {number} startY the start y coordinate
      * @param {number} endX the end x coordinate
@@ -414,6 +401,8 @@ class CanvasRenderer extends Renderer {
             return;
         }
 
+        var context = this.getContext();
+
         context.beginPath();
         context.moveTo(startX, startY);
         context.lineTo(endX, endY);
@@ -423,8 +412,7 @@ class CanvasRenderer extends Renderer {
     /**
      * Fill a line of the given two points
      * @name fillLine
-     * @memberof CanvasRenderer.prototype
-     * @function
+     * @memberof CanvasRenderer
      * @param {number} startX the start x coordinate
      * @param {number} startY the start y coordinate
      * @param {number} endX the end x coordinate
@@ -437,8 +425,7 @@ class CanvasRenderer extends Renderer {
     /**
      * Stroke the given me.Polygon on the screen
      * @name strokePolygon
-     * @memberof CanvasRenderer.prototype
-     * @function
+     * @memberof CanvasRenderer
      * @param {Polygon} poly the shape to draw
      * @param {boolean} [fill=false] also fill the shape with the current color if true
      */
@@ -466,8 +453,7 @@ class CanvasRenderer extends Renderer {
     /**
      * Fill the given me.Polygon on the screen
      * @name fillPolygon
-     * @memberof CanvasRenderer.prototype
-     * @function
+     * @memberof CanvasRenderer
      * @param {Polygon} poly the shape to draw
      */
     fillPolygon(poly) {
@@ -477,8 +463,7 @@ class CanvasRenderer extends Renderer {
     /**
      * Stroke a rectangle at the specified coordinates
      * @name strokeRect
-     * @memberof CanvasRenderer.prototype
-     * @function
+     * @memberof CanvasRenderer
      * @param {number} x
      * @param {number} y
      * @param {number} width
@@ -498,8 +483,7 @@ class CanvasRenderer extends Renderer {
     /**
      * Draw a filled rectangle at the specified coordinates
      * @name fillRect
-     * @memberof CanvasRenderer.prototype
-     * @function
+     * @memberof CanvasRenderer
      * @param {number} x
      * @param {number} y
      * @param {number} width
@@ -512,8 +496,7 @@ class CanvasRenderer extends Renderer {
     /**
      * Stroke a rounded rectangle at the specified coordinates
      * @name strokeRoundRect
-     * @memberof CanvasRenderer.prototype
-     * @function
+     * @memberof CanvasRenderer
      * @param {number} x
      * @param {number} y
      * @param {number} width
@@ -529,28 +512,14 @@ class CanvasRenderer extends Renderer {
         var context = this.getContext();
 
         context.beginPath();
-        if (typeof context.roundRect === "function") {
-            //https://developer.chrome.com/blog/canvas2d/#round-rect
-            context.roundRect(x, y, width, height, radius);
-        } else {
-            context.moveTo(x + radius, y);
-            context.lineTo(x + width - radius, y);
-            context.arcTo(x + width, y, x + width, y + radius, radius);
-            context.lineTo(x + width, y + height - radius);
-            context.arcTo(x + width, y + height, x + width - radius, y + height, radius);
-            context.lineTo(x + radius, y + height);
-            context.arcTo(x, y + height, x, y + height - radius, radius);
-            context.lineTo(x, y + radius);
-            context.arcTo(x, y, x + radius, y, radius);
-        }
+        context.roundRect(x, y, width, height, radius);
         context[fill === true ? "fill" : "stroke"]();
     }
 
     /**
      * Draw a rounded filled rectangle at the specified coordinates
      * @name fillRoundRect
-     * @memberof CanvasRenderer.prototype
-     * @function
+     * @memberof CanvasRenderer
      * @param {number} x
      * @param {number} y
      * @param {number} width
@@ -565,8 +534,7 @@ class CanvasRenderer extends Renderer {
     /**
      * return a reference to the system 2d Context
      * @name getContext
-     * @memberof CanvasRenderer.prototype
-     * @function
+     * @memberof CanvasRenderer
      * @returns {CanvasRenderingContext2D}
      */
     getContext() {
@@ -585,8 +553,7 @@ class CanvasRenderer extends Renderer {
     /**
      * save the canvas context
      * @name save
-     * @memberof CanvasRenderer.prototype
-     * @function
+     * @memberof CanvasRenderer
      */
     save() {
         this.backBufferContext2D.save();
@@ -595,8 +562,7 @@ class CanvasRenderer extends Renderer {
     /**
      * restores the canvas context
      * @name restore
-     * @memberof CanvasRenderer.prototype
-     * @function
+     * @memberof CanvasRenderer
      */
     restore() {
         this.backBufferContext2D.restore();
@@ -610,8 +576,7 @@ class CanvasRenderer extends Renderer {
     /**
      * rotates the canvas context
      * @name rotate
-     * @memberof CanvasRenderer.prototype
-     * @function
+     * @memberof CanvasRenderer
      * @param {number} angle in radians
      */
     rotate(angle) {
@@ -621,8 +586,7 @@ class CanvasRenderer extends Renderer {
     /**
      * scales the canvas context
      * @name scale
-     * @memberof CanvasRenderer.prototype
-     * @function
+     * @memberof CanvasRenderer
      * @param {number} x
      * @param {number} y
      */
@@ -634,8 +598,7 @@ 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 CanvasRenderer.prototype
-     * @function
+     * @memberof CanvasRenderer
      * @param {Color|string} color css color value
      */
     setColor(color) {
@@ -650,8 +613,7 @@ class CanvasRenderer extends Renderer {
     /**
      * Set the global alpha
      * @name setGlobalAlpha
-     * @memberof CanvasRenderer.prototype
-     * @function
+     * @memberof CanvasRenderer
      * @param {number} alpha 0.0 to 1.0 values accepted.
      */
     setGlobalAlpha(alpha) {
@@ -661,8 +623,7 @@ class CanvasRenderer extends Renderer {
     /**
      * Return the global alpha
      * @name getGlobalAlpha
-     * @memberof CanvasRenderer.prototype
-     * @function
+     * @memberof CanvasRenderer
      * @returns {number} global alpha value
      */
     getGlobalAlpha() {
@@ -672,8 +633,7 @@ class CanvasRenderer extends Renderer {
     /**
      * Set the line width on the context
      * @name setLineWidth
-     * @memberof CanvasRenderer.prototype
-     * @function
+     * @memberof CanvasRenderer
      * @param {number} width Line width
      */
     setLineWidth(width) {
@@ -684,8 +644,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 CanvasRenderer.prototype
-     * @function
+     * @memberof CanvasRenderer
      * @param {Matrix2d} mat2d Matrix to transform by
      */
     setTransform(mat2d) {
@@ -696,8 +655,7 @@ class CanvasRenderer extends Renderer {
     /**
      * Multiply given matrix into the renderer tranformation matrix
      * @name transform
-     * @memberof CanvasRenderer.prototype
-     * @function
+     * @memberof CanvasRenderer
      * @param {Matrix2d} mat2d Matrix to transform by
      */
     transform(mat2d) {
@@ -720,8 +678,7 @@ class CanvasRenderer extends Renderer {
     /**
      * Translates the context to the given position
      * @name translate
-     * @memberof CanvasRenderer.prototype
-     * @function
+     * @memberof CanvasRenderer
      * @param {number} x
      * @param {number} y
      */
@@ -740,8 +697,7 @@ 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 CanvasRenderer.prototype
-     * @function
+     * @memberof CanvasRenderer
      * @param {number} x
      * @param {number} y
      * @param {number} width
@@ -773,19 +729,27 @@ 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 CanvasRenderer.prototype
-     * @function
-     * @param {Rect|Polygon|Line|Ellipse} [mask] the shape defining the mask to be applied
+     * @memberof CanvasRenderer
+     * @param {Rect|RoundRect|Polygon|Line|Ellipse} [mask] the shape defining the mask to be applied
+     * @param {boolean} [invert=false] either the given shape should define what is visible (default) or the opposite
      */
-    setMask(mask) {
+    setMask(mask, invert = false) {
         var context = this.getContext();
-        var _x = mask.pos.x, _y = mask.pos.y;
 
-        context.save();
+        if (this.maskLevel === 0) {
+            // only save context on the first mask
+            context.save();
+            context.beginPath();
+        }
 
         // https://github.com/melonjs/melonJS/issues/648
-        if (mask instanceof Ellipse) {
-            var hw = mask.radiusV.x,
+        else if (mask instanceof RoundRect) {
+            context.roundRect(mask.top, mask.left, mask.width, mask.height, mask.radius);
+        } else if (mask instanceof Rect || mask instanceof Bounds) {
+            context.rect(mask.top, mask.left, mask.width, mask.height);
+        }  else if (mask instanceof Ellipse) {
+            const _x = mask.pos.x, _y = mask.pos.y,
+                hw = mask.radiusV.x,
                 hh = mask.radiusV.y,
                 lx = _x - hw,
                 rx = _x + hw,
@@ -799,36 +763,45 @@ class CanvasRenderer extends Renderer {
                 ymin = _y - ymagic,
                 ymax = _y + ymagic;
 
-            context.beginPath();
             context.moveTo(_x, ty);
             context.bezierCurveTo(xmax, ty, rx, ymin, rx, _y);
             context.bezierCurveTo(rx, ymax, xmax, by, _x, by);
             context.bezierCurveTo(xmin, by, lx, ymax, lx, _y);
             context.bezierCurveTo(lx, ymin, xmin, ty, _x, ty);
         } else {
-            context.beginPath();
-            context.moveTo(_x + mask.points[0].x, _y + mask.points[0].y);
+            const _x = mask.pos.x, _y = mask.pos.y;
             var point;
+
+            context.moveTo(_x + mask.points[0].x, _y + mask.points[0].y);
             for (var i = 1; i < mask.points.length; i++) {
                 point = mask.points[i];
                 context.lineTo(_x + point.x, _y + point.y);
             }
         }
 
-        context.clip();
+        this.maskLevel++;
+
+        if (invert === true) {
+            context.closePath();
+            context.globalCompositeOperation = "destination-atop";
+            context.fill();
+        } else {
+            context.clip();
+        }
     }
 
     /**
      * disable (remove) the rendering mask set through setMask.
      * @name clearMask
      * @see CanvasRenderer#setMask
-     * @memberof CanvasRenderer.prototype
-     * @function
+     * @memberof CanvasRenderer
      */
     clearMask() {
-        this.backBufferContext2D.restore();
+        if (this.maskLevel > 0) {
+            this.maskLevel = 0;
+            this.getContext().restore();
+        }
     }
-
 };
 
 export default CanvasRenderer;