@pixi/canvas-renderer - npm Package Compare versions

Comparing version 5.2.0 to 5.2.1

dist/canvas-renderer.js

 /*!
- * @pixi/canvas-renderer - v5.2.0
- * Compiled Wed, 06 Nov 2019 02:32:43 UTC
+ * @pixi/canvas-renderer - v5.2.1
+ * Compiled Tue, 28 Jan 2020 23:33:11 UTC
  *
@@ -23,2 +23,4 @@ * @pixi/canvas-renderer is licensed under the MIT License.
         this.renderer = renderer;
+
+        this._foundShapes = [];
     };
@@ -38,24 +40,59 @@
 
-        var cacheAlpha = maskObject.alpha;
-        var transform = maskObject.transform.worldTransform;
-        var resolution = renderer.resolution;
+        // TODO support sprite alpha masks??
+        // lots of effort required. If demand is great enough..
 
-        renderer.context.setTransform(
-            transform.a * resolution,
-            transform.b * resolution,
-            transform.c * resolution,
-            transform.d * resolution,
-            transform.tx * resolution,
-            transform.ty * resolution
-        );
+        var foundShapes = this._foundShapes;
 
-        // TODO support sprite alpha masks??
-        // lots of effort required. If demand is great enough..
-        if (!maskObject._texture)
+        this.recursiveFindShapes(maskObject, foundShapes);
+        if (foundShapes.length > 0)
         {
-            this.renderGraphicsShape(maskObject);
-            renderer.context.clip();
+            var context = renderer.context;
+                var resolution = renderer.resolution;
+
+            context.beginPath();
+
+            for (var i = 0; i < foundShapes.length; i++)
+            {
+                var shape = foundShapes[i];
+                var transform = shape.transform.worldTransform;
+
+                this.renderer.context.setTransform(
+                    transform.a * resolution,
+                    transform.b * resolution,
+                    transform.c * resolution,
+                    transform.d * resolution,
+                    transform.tx * resolution,
+                    transform.ty * resolution
+                );
+
+                this.renderGraphicsShape(shape);
+            }
+
+            foundShapes.length = 0;
+            context.clip();
         }
+    };
 
-        maskData.worldAlpha = cacheAlpha;
+    /**
+     * Renders all PIXI.Graphics shapes in a subtree.
+     *
+     * @param {PIXI.Container} container - container to scan.
+     * @param {PIXI.Graphics[]} out - where to put found shapes
+     */
+    CanvasMaskManager.prototype.recursiveFindShapes = function recursiveFindShapes (container, out)
+    {
+        if (container.geometry && container.geometry.graphicsData)
+        {
+            out.push(container);
+        }
+
+        var children = container.children;
+
+        if (children)
+        {
+            for (var i = 0; i < children.length; i++)
+            {
+                this.recursiveFindShapes(children[i], out);
+            }
+        }
     };
@@ -70,2 +107,4 @@
     {
+        graphics.finishPoly();
+
         var context = this.renderer.context;
@@ -80,4 +119,2 @@ var graphicsData = graphics.geometry.graphicsData;
 
-        context.beginPath();
-
         for (var i = 0; i < len; i++)
@@ -663,5 +700,5 @@ {
          * @property {PIXI.accessibility.AccessibilityManager} accessibility Support tabbing interactive elements.
-         * @property {PIXI.extract.CanvasExtract} extract Extract image data from renderer.
+         * @property {PIXI.CanvasExtract} extract Extract image data from renderer.
          * @property {PIXI.interaction.InteractionManager} interaction Handles mouse, touch and pointer events.
-         * @property {PIXI.prepare.CanvasPrepare} prepare Pre-render display objects.
+         * @property {PIXI.CanvasPrepare} prepare Pre-render display objects.
          */
@@ -668,0 +705,0 @@

dist/canvas-renderer.min.js

 /*!
- * @pixi/canvas-renderer - v5.2.0
- * Compiled Wed, 06 Nov 2019 02:32:43 UTC
+ * @pixi/canvas-renderer - v5.2.1
+ * Compiled Tue, 28 Jan 2020 23:33:11 UTC
  *
@@ -8,3 +8,3 @@ * @pixi/canvas-renderer is licensed under the MIT License.
  */
-this.PIXI=this.PIXI||{};var _pixi_canvas_renderer=function(t,e,o,r,i,n){"use strict";var a=function(t){this.renderer=t};function s(t){var e=document.createElement("canvas");e.width=6,e.height=1;var o=e.getContext("2d");return o.fillStyle=t,o.fillRect(0,0,6,1),e}function h(){if("undefined"==typeof document)return!1;var t=s("#ff00ff"),e=s("#ffff00"),o=document.createElement("canvas");o.width=6,o.height=1;var r=o.getContext("2d");r.globalCompositeOperation="multiply",r.drawImage(t,0,0),r.drawImage(e,2,0);var i=r.getImageData(2,0,1,1);if(!i)return!1;var n=i.data;return 255===n[0]&&0===n[1]&&0===n[2]}a.prototype.pushMask=function(t){var e=this.renderer,o=t.isMaskData?t.maskObject:t;e.context.save();var r=o.alpha,i=o.transform.worldTransform,n=e.resolution;e.context.setTransform(i.a*n,i.b*n,i.c*n,i.d*n,i.tx*n,i.ty*n),o._texture||(this.renderGraphicsShape(o),e.context.clip()),t.worldAlpha=r},a.prototype.renderGraphicsShape=function(t){var e=this.renderer.context,o=t.geometry.graphicsData,i=o.length;if(0!==i){e.beginPath();for(var n=0;n<i;n++){var a=o[n],s=a.shape;if(a.type===r.SHAPES.POLY){var h=s.points;e.moveTo(h[0],h[1]);for(var l=1;l<h.length/2;l++)e.lineTo(h[2*l],h[2*l+1]);h[0]===h[h.length-2]&&h[1]===h[h.length-1]&&e.closePath()}else if(a.type===r.SHAPES.RECT)e.rect(s.x,s.y,s.width,s.height),e.closePath();else if(a.type===r.SHAPES.CIRC)e.arc(s.x,s.y,s.radius,0,2*Math.PI),e.closePath();else if(a.type===r.SHAPES.ELIP){var c=2*s.width,E=2*s.height,d=s.x-c/2,D=s.y-E/2,u=c/2*.5522848,g=E/2*.5522848,S=d+c,_=D+E,p=d+c/2,O=D+E/2;e.moveTo(d,O),e.bezierCurveTo(d,O-g,p-u,D,p,D),e.bezierCurveTo(p+u,D,S,O-g,S,O),e.bezierCurveTo(S,O+g,p+u,_,p,_),e.bezierCurveTo(p-u,_,d,O+g,d,O),e.closePath()}else if(a.type===r.SHAPES.RREC){var v=s.x,M=s.y,m=s.width,N=s.height,L=s.radius,C=Math.min(m,N)/2|0;L=L>C?C:L,e.moveTo(v,M+L),e.lineTo(v,M+N-L),e.quadraticCurveTo(v,M+N,v+L,M+N),e.lineTo(v+m-L,M+N),e.quadraticCurveTo(v+m,M+N,v+m,M+N-L),e.lineTo(v+m,M+L),e.quadraticCurveTo(v+m,M,v+m-L,M),e.lineTo(v+L,M),e.quadraticCurveTo(v,M,v,M+L),e.closePath()}}}},a.prototype.popMask=function(t){t.context.restore(),t.invalidateBlendMode()},a.prototype.destroy=function(){};var l=function(t){function r(e,n,s){var l;t.call(this,"Canvas",e,n,s),this.type=i.RENDERER_TYPE.CANVAS,this.rootContext=this.view.getContext("2d",{alpha:this.transparent}),this.context=this.rootContext,this.refresh=!0,this.maskManager=new a(this),this.smoothProperty="imageSmoothingEnabled",this.rootContext.imageSmoothingEnabled||(this.rootContext.webkitImageSmoothingEnabled?this.smoothProperty="webkitImageSmoothingEnabled":this.rootContext.mozImageSmoothingEnabled?this.smoothProperty="mozImageSmoothingEnabled":this.rootContext.oImageSmoothingEnabled?this.smoothProperty="oImageSmoothingEnabled":this.rootContext.msImageSmoothingEnabled&&(this.smoothProperty="msImageSmoothingEnabled")),this.initPlugins(r.__plugins),this.blendModes=(void 0===l&&(l=[]),h()?(l[i.BLEND_MODES.NORMAL]="source-over",l[i.BLEND_MODES.ADD]="lighter",l[i.BLEND_MODES.MULTIPLY]="multiply",l[i.BLEND_MODES.SCREEN]="screen",l[i.BLEND_MODES.OVERLAY]="overlay",l[i.BLEND_MODES.DARKEN]="darken",l[i.BLEND_MODES.LIGHTEN]="lighten",l[i.BLEND_MODES.COLOR_DODGE]="color-dodge",l[i.BLEND_MODES.COLOR_BURN]="color-burn",l[i.BLEND_MODES.HARD_LIGHT]="hard-light",l[i.BLEND_MODES.SOFT_LIGHT]="soft-light",l[i.BLEND_MODES.DIFFERENCE]="difference",l[i.BLEND_MODES.EXCLUSION]="exclusion",l[i.BLEND_MODES.HUE]="hue",l[i.BLEND_MODES.SATURATION]="saturate",l[i.BLEND_MODES.COLOR]="color",l[i.BLEND_MODES.LUMINOSITY]="luminosity"):(l[i.BLEND_MODES.NORMAL]="source-over",l[i.BLEND_MODES.ADD]="lighter",l[i.BLEND_MODES.MULTIPLY]="source-over",l[i.BLEND_MODES.SCREEN]="source-over",l[i.BLEND_MODES.OVERLAY]="source-over",l[i.BLEND_MODES.DARKEN]="source-over",l[i.BLEND_MODES.LIGHTEN]="source-over",l[i.BLEND_MODES.COLOR_DODGE]="source-over",l[i.BLEND_MODES.COLOR_BURN]="source-over",l[i.BLEND_MODES.HARD_LIGHT]="source-over",l[i.BLEND_MODES.SOFT_LIGHT]="source-over",l[i.BLEND_MODES.DIFFERENCE]="source-over",l[i.BLEND_MODES.EXCLUSION]="source-over",l[i.BLEND_MODES.HUE]="source-over",l[i.BLEND_MODES.SATURATION]="source-over",l[i.BLEND_MODES.COLOR]="source-over",l[i.BLEND_MODES.LUMINOSITY]="source-over"),l[i.BLEND_MODES.NORMAL_NPM]=l[i.BLEND_MODES.NORMAL],l[i.BLEND_MODES.ADD_NPM]=l[i.BLEND_MODES.ADD],l[i.BLEND_MODES.SCREEN_NPM]=l[i.BLEND_MODES.SCREEN],l[i.BLEND_MODES.SRC_IN]="source-in",l[i.BLEND_MODES.SRC_OUT]="source-out",l[i.BLEND_MODES.SRC_ATOP]="source-atop",l[i.BLEND_MODES.DST_OVER]="destination-over",l[i.BLEND_MODES.DST_IN]="destination-in",l[i.BLEND_MODES.DST_OUT]="destination-out",l[i.BLEND_MODES.DST_ATOP]="destination-atop",l[i.BLEND_MODES.XOR]="xor",l[i.BLEND_MODES.SUBTRACT]="source-over",l),this._activeBlendMode=null,this._outerBlend=!1,this.renderingToScreen=!1,o.sayHello("Canvas"),this.resize(this.options.width,this.options.height)}return t&&(r.__proto__=t),r.prototype=Object.create(t&&t.prototype),r.prototype.constructor=r,r.prototype.render=function(t,r,n,a,s){if(this.view){this.renderingToScreen=!r,this.emit("prerender");var h=this.resolution;r?((r=r.baseTexture||r)._canvasRenderTarget||(r._canvasRenderTarget=new o.CanvasRenderTarget(r.width,r.height,r.resolution),r.resource=new e.resources.CanvasResource(r._canvasRenderTarget.canvas),r.valid=!0),this.context=r._canvasRenderTarget.context,this.resolution=r._canvasRenderTarget.resolution):this.context=this.rootContext;var l=this.context;if(r||(this._lastObjectRendered=t),!s){var c=t.parent,E=this._tempDisplayObjectParent.transform.worldTransform;a?(a.copyTo(E),t.transform._parentID=-1):E.identity(),t.parent=this._tempDisplayObjectParent,t.updateTransform(),t.parent=c,a&&(t.transform._parentID=-1)}l.save(),l.setTransform(1,0,0,1,0,0),l.globalAlpha=1,this._activeBlendMode=i.BLEND_MODES.NORMAL,this._outerBlend=!1,l.globalCompositeOperation=this.blendModes[i.BLEND_MODES.NORMAL],(void 0!==n?n:this.clearBeforeRender)&&this.renderingToScreen&&(this.transparent?l.clearRect(0,0,this.width,this.height):(l.fillStyle=this._backgroundColorString,l.fillRect(0,0,this.width,this.height)));var d=this.context;this.context=l,t.renderCanvas(this),this.context=d,l.restore(),this.resolution=h,this.emit("postrender")}},r.prototype.clear=function(t){var e=this.context;t=t||this._backgroundColorString,!this.transparent&&t?(e.fillStyle=t,e.fillRect(0,0,this.width,this.height)):e.clearRect(0,0,this.width,this.height)},r.prototype.setBlendMode=function(t,e){var o=t===i.BLEND_MODES.SRC_IN||t===i.BLEND_MODES.SRC_OUT||t===i.BLEND_MODES.DST_IN||t===i.BLEND_MODES.DST_ATOP;!e&&o&&(t=i.BLEND_MODES.NORMAL),this._activeBlendMode!==t&&(this._activeBlendMode=t,this._outerBlend=o,this.context.globalCompositeOperation=this.blendModes[t])},r.prototype.destroy=function(e){t.prototype.destroy.call(this,e),this.context=null,this.refresh=!0,this.maskManager.destroy(),this.maskManager=null,this.smoothProperty=null},r.prototype.resize=function(e,o){t.prototype.resize.call(this,e,o),this.smoothProperty&&(this.rootContext[this.smoothProperty]=n.settings.SCALE_MODE===i.SCALE_MODES.LINEAR)},r.prototype.invalidateBlendMode=function(){this._activeBlendMode=this.blendModes.indexOf(this.context.globalCompositeOperation)},r.registerPlugin=function(t,e){r.__plugins=r.__plugins||{},r.__plugins[t]=e},r}(e.AbstractRenderer),c={getTintedCanvas:function(t,e){var o=t.texture,r="#"+("00000"+(0|(e=c.roundColor(e))).toString(16)).substr(-6);o.tintCache=o.tintCache||{};var i,n=o.tintCache[r];if(n){if(n.tintId===o._updateID)return o.tintCache[r];i=o.tintCache[r]}else i=c.canvas||document.createElement("canvas");if(c.tintMethod(o,e,i),i.tintId=o._updateID,c.convertTintToImage){var a=new Image;a.src=i.toDataURL(),o.tintCache[r]=a}else o.tintCache[r]=i,c.canvas=null;return i},tintWithMultiply:function(t,e,o){var r=o.getContext("2d"),i=t._frame.clone(),n=t.baseTexture.resolution;i.x*=n,i.y*=n,i.width*=n,i.height*=n,o.width=Math.ceil(i.width),o.height=Math.ceil(i.height),r.save(),r.fillStyle="#"+("00000"+(0|e).toString(16)).substr(-6),r.fillRect(0,0,i.width,i.height),r.globalCompositeOperation="multiply";var a=t.baseTexture.getDrawableSource();r.drawImage(a,i.x,i.y,i.width,i.height,0,0,i.width,i.height),r.globalCompositeOperation="destination-atop",r.drawImage(a,i.x,i.y,i.width,i.height,0,0,i.width,i.height),r.restore()},tintWithOverlay:function(t,e,o){var r=o.getContext("2d"),i=t._frame.clone(),n=t.baseTexture.resolution;i.x*=n,i.y*=n,i.width*=n,i.height*=n,o.width=Math.ceil(i.width),o.height=Math.ceil(i.height),r.save(),r.globalCompositeOperation="copy",r.fillStyle="#"+("00000"+(0|e).toString(16)).substr(-6),r.fillRect(0,0,i.width,i.height),r.globalCompositeOperation="destination-atop",r.drawImage(t.baseTexture.getDrawableSource(),i.x,i.y,i.width,i.height,0,0,i.width,i.height),r.restore()},tintWithPerPixel:function(t,e,r){var i=r.getContext("2d"),n=t._frame.clone(),a=t.baseTexture.resolution;n.x*=a,n.y*=a,n.width*=a,n.height*=a,r.width=Math.ceil(n.width),r.height=Math.ceil(n.height),i.save(),i.globalCompositeOperation="copy",i.drawImage(t.baseTexture.getDrawableSource(),n.x,n.y,n.width,n.height,0,0,n.width,n.height),i.restore();for(var s=o.hex2rgb(e),h=s[0],l=s[1],c=s[2],E=i.getImageData(0,0,n.width,n.height),d=E.data,D=0;D<d.length;D+=4)d[D+0]*=h,d[D+1]*=l,d[D+2]*=c;i.putImageData(E,0,0)},roundColor:function(t){var e=c.cacheStepsPerColorChannel,r=o.hex2rgb(t);return r[0]=Math.min(255,r[0]/e*e),r[1]=Math.min(255,r[1]/e*e),r[2]=Math.min(255,r[2]/e*e),o.rgb2hex(r)},cacheStepsPerColorChannel:8,convertTintToImage:!1,canUseMultiply:h(),tintMethod:function(){}};c.tintMethod=c.canUseMultiply?c.tintWithMultiply:c.tintWithPerPixel;var E=e.Renderer.create;return e.Renderer.create=function(t){if(!(t&&t.forceCanvas))try{return E(t)}catch(t){}return new l(t)},e.BaseTexture.prototype.getDrawableSource=function(){var t=this.resource;return t?t.bitmap||t.source:this.source},t.CanvasRenderer=l,t.canUseNewCanvasBlendModes=h,t.canvasUtils=c,t}({},PIXI,PIXI.utils,PIXI,PIXI,PIXI);Object.assign(this.PIXI,_pixi_canvas_renderer);
+this.PIXI=this.PIXI||{};var _pixi_canvas_renderer=function(e,t,r,o,i,n){"use strict";var a=function(e){this.renderer=e,this._foundShapes=[]};function s(e){var t=document.createElement("canvas");t.width=6,t.height=1;var r=t.getContext("2d");return r.fillStyle=e,r.fillRect(0,0,6,1),t}function h(){if("undefined"==typeof document)return!1;var e=s("#ff00ff"),t=s("#ffff00"),r=document.createElement("canvas");r.width=6,r.height=1;var o=r.getContext("2d");o.globalCompositeOperation="multiply",o.drawImage(e,0,0),o.drawImage(t,2,0);var i=o.getImageData(2,0,1,1);if(!i)return!1;var n=i.data;return 255===n[0]&&0===n[1]&&0===n[2]}a.prototype.pushMask=function(e){var t=this.renderer,r=e.isMaskData?e.maskObject:e;t.context.save();var o=this._foundShapes;if(this.recursiveFindShapes(r,o),o.length>0){var i=t.context,n=t.resolution;i.beginPath();for(var a=0;a<o.length;a++){var s=o[a],h=s.transform.worldTransform;this.renderer.context.setTransform(h.a*n,h.b*n,h.c*n,h.d*n,h.tx*n,h.ty*n),this.renderGraphicsShape(s)}o.length=0,i.clip()}},a.prototype.recursiveFindShapes=function(e,t){e.geometry&&e.geometry.graphicsData&&t.push(e);var r=e.children;if(r)for(var o=0;o<r.length;o++)this.recursiveFindShapes(r[o],t)},a.prototype.renderGraphicsShape=function(e){e.finishPoly();var t=this.renderer.context,r=e.geometry.graphicsData,i=r.length;if(0!==i)for(var n=0;n<i;n++){var a=r[n],s=a.shape;if(a.type===o.SHAPES.POLY){var h=s.points;t.moveTo(h[0],h[1]);for(var l=1;l<h.length/2;l++)t.lineTo(h[2*l],h[2*l+1]);h[0]===h[h.length-2]&&h[1]===h[h.length-1]&&t.closePath()}else if(a.type===o.SHAPES.RECT)t.rect(s.x,s.y,s.width,s.height),t.closePath();else if(a.type===o.SHAPES.CIRC)t.arc(s.x,s.y,s.radius,0,2*Math.PI),t.closePath();else if(a.type===o.SHAPES.ELIP){var c=2*s.width,E=2*s.height,d=s.x-c/2,D=s.y-E/2,u=c/2*.5522848,g=E/2*.5522848,p=d+c,S=D+E,_=d+c/2,v=D+E/2;t.moveTo(d,v),t.bezierCurveTo(d,v-g,_-u,D,_,D),t.bezierCurveTo(_+u,D,p,v-g,p,v),t.bezierCurveTo(p,v+g,_+u,S,_,S),t.bezierCurveTo(_-u,S,d,v+g,d,v),t.closePath()}else if(a.type===o.SHAPES.RREC){var O=s.x,M=s.y,m=s.width,N=s.height,L=s.radius,f=Math.min(m,N)/2|0;L=L>f?f:L,t.moveTo(O,M+L),t.lineTo(O,M+N-L),t.quadraticCurveTo(O,M+N,O+L,M+N),t.lineTo(O+m-L,M+N),t.quadraticCurveTo(O+m,M+N,O+m,M+N-L),t.lineTo(O+m,M+L),t.quadraticCurveTo(O+m,M,O+m-L,M),t.lineTo(O+L,M),t.quadraticCurveTo(O,M,O,M+L),t.closePath()}}},a.prototype.popMask=function(e){e.context.restore(),e.invalidateBlendMode()},a.prototype.destroy=function(){};var l=function(e){function o(t,n,s){var l;e.call(this,"Canvas",t,n,s),this.type=i.RENDERER_TYPE.CANVAS,this.rootContext=this.view.getContext("2d",{alpha:this.transparent}),this.context=this.rootContext,this.refresh=!0,this.maskManager=new a(this),this.smoothProperty="imageSmoothingEnabled",this.rootContext.imageSmoothingEnabled||(this.rootContext.webkitImageSmoothingEnabled?this.smoothProperty="webkitImageSmoothingEnabled":this.rootContext.mozImageSmoothingEnabled?this.smoothProperty="mozImageSmoothingEnabled":this.rootContext.oImageSmoothingEnabled?this.smoothProperty="oImageSmoothingEnabled":this.rootContext.msImageSmoothingEnabled&&(this.smoothProperty="msImageSmoothingEnabled")),this.initPlugins(o.__plugins),this.blendModes=(void 0===l&&(l=[]),h()?(l[i.BLEND_MODES.NORMAL]="source-over",l[i.BLEND_MODES.ADD]="lighter",l[i.BLEND_MODES.MULTIPLY]="multiply",l[i.BLEND_MODES.SCREEN]="screen",l[i.BLEND_MODES.OVERLAY]="overlay",l[i.BLEND_MODES.DARKEN]="darken",l[i.BLEND_MODES.LIGHTEN]="lighten",l[i.BLEND_MODES.COLOR_DODGE]="color-dodge",l[i.BLEND_MODES.COLOR_BURN]="color-burn",l[i.BLEND_MODES.HARD_LIGHT]="hard-light",l[i.BLEND_MODES.SOFT_LIGHT]="soft-light",l[i.BLEND_MODES.DIFFERENCE]="difference",l[i.BLEND_MODES.EXCLUSION]="exclusion",l[i.BLEND_MODES.HUE]="hue",l[i.BLEND_MODES.SATURATION]="saturate",l[i.BLEND_MODES.COLOR]="color",l[i.BLEND_MODES.LUMINOSITY]="luminosity"):(l[i.BLEND_MODES.NORMAL]="source-over",l[i.BLEND_MODES.ADD]="lighter",l[i.BLEND_MODES.MULTIPLY]="source-over",l[i.BLEND_MODES.SCREEN]="source-over",l[i.BLEND_MODES.OVERLAY]="source-over",l[i.BLEND_MODES.DARKEN]="source-over",l[i.BLEND_MODES.LIGHTEN]="source-over",l[i.BLEND_MODES.COLOR_DODGE]="source-over",l[i.BLEND_MODES.COLOR_BURN]="source-over",l[i.BLEND_MODES.HARD_LIGHT]="source-over",l[i.BLEND_MODES.SOFT_LIGHT]="source-over",l[i.BLEND_MODES.DIFFERENCE]="source-over",l[i.BLEND_MODES.EXCLUSION]="source-over",l[i.BLEND_MODES.HUE]="source-over",l[i.BLEND_MODES.SATURATION]="source-over",l[i.BLEND_MODES.COLOR]="source-over",l[i.BLEND_MODES.LUMINOSITY]="source-over"),l[i.BLEND_MODES.NORMAL_NPM]=l[i.BLEND_MODES.NORMAL],l[i.BLEND_MODES.ADD_NPM]=l[i.BLEND_MODES.ADD],l[i.BLEND_MODES.SCREEN_NPM]=l[i.BLEND_MODES.SCREEN],l[i.BLEND_MODES.SRC_IN]="source-in",l[i.BLEND_MODES.SRC_OUT]="source-out",l[i.BLEND_MODES.SRC_ATOP]="source-atop",l[i.BLEND_MODES.DST_OVER]="destination-over",l[i.BLEND_MODES.DST_IN]="destination-in",l[i.BLEND_MODES.DST_OUT]="destination-out",l[i.BLEND_MODES.DST_ATOP]="destination-atop",l[i.BLEND_MODES.XOR]="xor",l[i.BLEND_MODES.SUBTRACT]="source-over",l),this._activeBlendMode=null,this._outerBlend=!1,this.renderingToScreen=!1,r.sayHello("Canvas"),this.resize(this.options.width,this.options.height)}return e&&(o.__proto__=e),o.prototype=Object.create(e&&e.prototype),o.prototype.constructor=o,o.prototype.render=function(e,o,n,a,s){if(this.view){this.renderingToScreen=!o,this.emit("prerender");var h=this.resolution;o?((o=o.baseTexture||o)._canvasRenderTarget||(o._canvasRenderTarget=new r.CanvasRenderTarget(o.width,o.height,o.resolution),o.resource=new t.resources.CanvasResource(o._canvasRenderTarget.canvas),o.valid=!0),this.context=o._canvasRenderTarget.context,this.resolution=o._canvasRenderTarget.resolution):this.context=this.rootContext;var l=this.context;if(o||(this._lastObjectRendered=e),!s){var c=e.parent,E=this._tempDisplayObjectParent.transform.worldTransform;a?(a.copyTo(E),e.transform._parentID=-1):E.identity(),e.parent=this._tempDisplayObjectParent,e.updateTransform(),e.parent=c,a&&(e.transform._parentID=-1)}l.save(),l.setTransform(1,0,0,1,0,0),l.globalAlpha=1,this._activeBlendMode=i.BLEND_MODES.NORMAL,this._outerBlend=!1,l.globalCompositeOperation=this.blendModes[i.BLEND_MODES.NORMAL],(void 0!==n?n:this.clearBeforeRender)&&this.renderingToScreen&&(this.transparent?l.clearRect(0,0,this.width,this.height):(l.fillStyle=this._backgroundColorString,l.fillRect(0,0,this.width,this.height)));var d=this.context;this.context=l,e.renderCanvas(this),this.context=d,l.restore(),this.resolution=h,this.emit("postrender")}},o.prototype.clear=function(e){var t=this.context;e=e||this._backgroundColorString,!this.transparent&&e?(t.fillStyle=e,t.fillRect(0,0,this.width,this.height)):t.clearRect(0,0,this.width,this.height)},o.prototype.setBlendMode=function(e,t){var r=e===i.BLEND_MODES.SRC_IN||e===i.BLEND_MODES.SRC_OUT||e===i.BLEND_MODES.DST_IN||e===i.BLEND_MODES.DST_ATOP;!t&&r&&(e=i.BLEND_MODES.NORMAL),this._activeBlendMode!==e&&(this._activeBlendMode=e,this._outerBlend=r,this.context.globalCompositeOperation=this.blendModes[e])},o.prototype.destroy=function(t){e.prototype.destroy.call(this,t),this.context=null,this.refresh=!0,this.maskManager.destroy(),this.maskManager=null,this.smoothProperty=null},o.prototype.resize=function(t,r){e.prototype.resize.call(this,t,r),this.smoothProperty&&(this.rootContext[this.smoothProperty]=n.settings.SCALE_MODE===i.SCALE_MODES.LINEAR)},o.prototype.invalidateBlendMode=function(){this._activeBlendMode=this.blendModes.indexOf(this.context.globalCompositeOperation)},o.registerPlugin=function(e,t){o.__plugins=o.__plugins||{},o.__plugins[e]=t},o}(t.AbstractRenderer),c={getTintedCanvas:function(e,t){var r=e.texture,o="#"+("00000"+(0|(t=c.roundColor(t))).toString(16)).substr(-6);r.tintCache=r.tintCache||{};var i,n=r.tintCache[o];if(n){if(n.tintId===r._updateID)return r.tintCache[o];i=r.tintCache[o]}else i=c.canvas||document.createElement("canvas");if(c.tintMethod(r,t,i),i.tintId=r._updateID,c.convertTintToImage){var a=new Image;a.src=i.toDataURL(),r.tintCache[o]=a}else r.tintCache[o]=i,c.canvas=null;return i},tintWithMultiply:function(e,t,r){var o=r.getContext("2d"),i=e._frame.clone(),n=e.baseTexture.resolution;i.x*=n,i.y*=n,i.width*=n,i.height*=n,r.width=Math.ceil(i.width),r.height=Math.ceil(i.height),o.save(),o.fillStyle="#"+("00000"+(0|t).toString(16)).substr(-6),o.fillRect(0,0,i.width,i.height),o.globalCompositeOperation="multiply";var a=e.baseTexture.getDrawableSource();o.drawImage(a,i.x,i.y,i.width,i.height,0,0,i.width,i.height),o.globalCompositeOperation="destination-atop",o.drawImage(a,i.x,i.y,i.width,i.height,0,0,i.width,i.height),o.restore()},tintWithOverlay:function(e,t,r){var o=r.getContext("2d"),i=e._frame.clone(),n=e.baseTexture.resolution;i.x*=n,i.y*=n,i.width*=n,i.height*=n,r.width=Math.ceil(i.width),r.height=Math.ceil(i.height),o.save(),o.globalCompositeOperation="copy",o.fillStyle="#"+("00000"+(0|t).toString(16)).substr(-6),o.fillRect(0,0,i.width,i.height),o.globalCompositeOperation="destination-atop",o.drawImage(e.baseTexture.getDrawableSource(),i.x,i.y,i.width,i.height,0,0,i.width,i.height),o.restore()},tintWithPerPixel:function(e,t,o){var i=o.getContext("2d"),n=e._frame.clone(),a=e.baseTexture.resolution;n.x*=a,n.y*=a,n.width*=a,n.height*=a,o.width=Math.ceil(n.width),o.height=Math.ceil(n.height),i.save(),i.globalCompositeOperation="copy",i.drawImage(e.baseTexture.getDrawableSource(),n.x,n.y,n.width,n.height,0,0,n.width,n.height),i.restore();for(var s=r.hex2rgb(t),h=s[0],l=s[1],c=s[2],E=i.getImageData(0,0,n.width,n.height),d=E.data,D=0;D<d.length;D+=4)d[D+0]*=h,d[D+1]*=l,d[D+2]*=c;i.putImageData(E,0,0)},roundColor:function(e){var t=c.cacheStepsPerColorChannel,o=r.hex2rgb(e);return o[0]=Math.min(255,o[0]/t*t),o[1]=Math.min(255,o[1]/t*t),o[2]=Math.min(255,o[2]/t*t),r.rgb2hex(o)},cacheStepsPerColorChannel:8,convertTintToImage:!1,canUseMultiply:h(),tintMethod:function(){}};c.tintMethod=c.canUseMultiply?c.tintWithMultiply:c.tintWithPerPixel;var E=t.Renderer.create;return t.Renderer.create=function(e){if(!(e&&e.forceCanvas))try{return E(e)}catch(e){}return new l(e)},t.BaseTexture.prototype.getDrawableSource=function(){var e=this.resource;return e?e.bitmap||e.source:this.source},e.CanvasRenderer=l,e.canUseNewCanvasBlendModes=h,e.canvasUtils=c,e}({},PIXI,PIXI.utils,PIXI,PIXI,PIXI);Object.assign(this.PIXI,_pixi_canvas_renderer);
 //# sourceMappingURL=canvas-renderer.min.js.map

lib/canvas-renderer.es.js

 /*!
- * @pixi/canvas-renderer - v5.2.0
- * Compiled Wed, 06 Nov 2019 02:32:43 UTC
+ * @pixi/canvas-renderer - v5.2.1
+ * Compiled Tue, 28 Jan 2020 23:33:11 UTC
  *
@@ -25,2 +25,4 @@ * @pixi/canvas-renderer is licensed under the MIT License.
     this.renderer = renderer;
+
+    this._foundShapes = [];
 };
@@ -40,24 +42,59 @@
 
-    var cacheAlpha = maskObject.alpha;
-    var transform = maskObject.transform.worldTransform;
-    var resolution = renderer.resolution;
+    // TODO support sprite alpha masks??
+    // lots of effort required. If demand is great enough..
 
-    renderer.context.setTransform(
-        transform.a * resolution,
-        transform.b * resolution,
-        transform.c * resolution,
-        transform.d * resolution,
-        transform.tx * resolution,
-        transform.ty * resolution
-    );
+    var foundShapes = this._foundShapes;
 
-    // TODO support sprite alpha masks??
-    // lots of effort required. If demand is great enough..
-    if (!maskObject._texture)
+    this.recursiveFindShapes(maskObject, foundShapes);
+    if (foundShapes.length > 0)
     {
-        this.renderGraphicsShape(maskObject);
-        renderer.context.clip();
+        var context = renderer.context;
+            var resolution = renderer.resolution;
+
+        context.beginPath();
+
+        for (var i = 0; i < foundShapes.length; i++)
+        {
+            var shape = foundShapes[i];
+            var transform = shape.transform.worldTransform;
+
+            this.renderer.context.setTransform(
+                transform.a * resolution,
+                transform.b * resolution,
+                transform.c * resolution,
+                transform.d * resolution,
+                transform.tx * resolution,
+                transform.ty * resolution
+            );
+
+            this.renderGraphicsShape(shape);
+        }
+
+        foundShapes.length = 0;
+        context.clip();
     }
+};
 
-    maskData.worldAlpha = cacheAlpha;
+/**
+ * Renders all PIXI.Graphics shapes in a subtree.
+ *
+ * @param {PIXI.Container} container - container to scan.
+ * @param {PIXI.Graphics[]} out - where to put found shapes
+ */
+CanvasMaskManager.prototype.recursiveFindShapes = function recursiveFindShapes (container, out)
+{
+    if (container.geometry && container.geometry.graphicsData)
+    {
+        out.push(container);
+    }
+
+    var children = container.children;
+
+    if (children)
+    {
+        for (var i = 0; i < children.length; i++)
+        {
+            this.recursiveFindShapes(children[i], out);
+        }
+    }
 };
@@ -72,2 +109,4 @@
 {
+    graphics.finishPoly();
+
     var context = this.renderer.context;
@@ -82,4 +121,2 @@ var graphicsData = graphics.geometry.graphicsData;
 
-    context.beginPath();
-
     for (var i = 0; i < len; i++)
@@ -665,5 +702,5 @@ {
      * @property {PIXI.accessibility.AccessibilityManager} accessibility Support tabbing interactive elements.
-     * @property {PIXI.extract.CanvasExtract} extract Extract image data from renderer.
+     * @property {PIXI.CanvasExtract} extract Extract image data from renderer.
      * @property {PIXI.interaction.InteractionManager} interaction Handles mouse, touch and pointer events.
-     * @property {PIXI.prepare.CanvasPrepare} prepare Pre-render display objects.
+     * @property {PIXI.CanvasPrepare} prepare Pre-render display objects.
      */
@@ -670,0 +707,0 @@

lib/canvas-renderer.js

 /*!
- * @pixi/canvas-renderer - v5.2.0
- * Compiled Wed, 06 Nov 2019 02:32:43 UTC
+ * @pixi/canvas-renderer - v5.2.1
+ * Compiled Tue, 28 Jan 2020 23:33:11 UTC
  *
@@ -29,2 +29,4 @@ * @pixi/canvas-renderer is licensed under the MIT License.
     this.renderer = renderer;
+
+    this._foundShapes = [];
 };
@@ -44,24 +46,59 @@
 
-    var cacheAlpha = maskObject.alpha;
-    var transform = maskObject.transform.worldTransform;
-    var resolution = renderer.resolution;
+    // TODO support sprite alpha masks??
+    // lots of effort required. If demand is great enough..
 
-    renderer.context.setTransform(
-        transform.a * resolution,
-        transform.b * resolution,
-        transform.c * resolution,
-        transform.d * resolution,
-        transform.tx * resolution,
-        transform.ty * resolution
-    );
+    var foundShapes = this._foundShapes;
 
-    // TODO support sprite alpha masks??
-    // lots of effort required. If demand is great enough..
-    if (!maskObject._texture)
+    this.recursiveFindShapes(maskObject, foundShapes);
+    if (foundShapes.length > 0)
     {
-        this.renderGraphicsShape(maskObject);
-        renderer.context.clip();
+        var context = renderer.context;
+            var resolution = renderer.resolution;
+
+        context.beginPath();
+
+        for (var i = 0; i < foundShapes.length; i++)
+        {
+            var shape = foundShapes[i];
+            var transform = shape.transform.worldTransform;
+
+            this.renderer.context.setTransform(
+                transform.a * resolution,
+                transform.b * resolution,
+                transform.c * resolution,
+                transform.d * resolution,
+                transform.tx * resolution,
+                transform.ty * resolution
+            );
+
+            this.renderGraphicsShape(shape);
+        }
+
+        foundShapes.length = 0;
+        context.clip();
     }
+};
 
-    maskData.worldAlpha = cacheAlpha;
+/**
+ * Renders all PIXI.Graphics shapes in a subtree.
+ *
+ * @param {PIXI.Container} container - container to scan.
+ * @param {PIXI.Graphics[]} out - where to put found shapes
+ */
+CanvasMaskManager.prototype.recursiveFindShapes = function recursiveFindShapes (container, out)
+{
+    if (container.geometry && container.geometry.graphicsData)
+    {
+        out.push(container);
+    }
+
+    var children = container.children;
+
+    if (children)
+    {
+        for (var i = 0; i < children.length; i++)
+        {
+            this.recursiveFindShapes(children[i], out);
+        }
+    }
 };
@@ -76,2 +113,4 @@
 {
+    graphics.finishPoly();
+
     var context = this.renderer.context;
@@ -86,4 +125,2 @@ var graphicsData = graphics.geometry.graphicsData;
 
-    context.beginPath();
-
     for (var i = 0; i < len; i++)
@@ -669,5 +706,5 @@ {
      * @property {PIXI.accessibility.AccessibilityManager} accessibility Support tabbing interactive elements.
-     * @property {PIXI.extract.CanvasExtract} extract Extract image data from renderer.
+     * @property {PIXI.CanvasExtract} extract Extract image data from renderer.
      * @property {PIXI.interaction.InteractionManager} interaction Handles mouse, touch and pointer events.
-     * @property {PIXI.prepare.CanvasPrepare} prepare Pre-render display objects.
+     * @property {PIXI.CanvasPrepare} prepare Pre-render display objects.
      */
@@ -674,0 +711,0 @@

package.json

 {
   "name": "@pixi/canvas-renderer",
-  "version": "5.2.0",
+  "version": "5.2.1",
   "main": "lib/canvas-renderer.js",
@@ -27,12 +27,14 @@ "module": "lib/canvas-renderer.es.js",
   "dependencies": {
-    "@pixi/constants": "^5.2.0",
-    "@pixi/core": "^5.2.0",
-    "@pixi/math": "^5.2.0",
-    "@pixi/settings": "^5.2.0",
-    "@pixi/utils": "^5.2.0"
+    "@pixi/constants": "5.2.1",
+    "@pixi/core": "5.2.1",
+    "@pixi/math": "5.2.1",
+    "@pixi/settings": "5.2.1",
+    "@pixi/utils": "5.2.1"
   },
   "devDependencies": {
-    "@pixi/display": "^5.2.0"
+    "@pixi/display": "5.2.1",
+    "@pixi/graphics": "5.2.1",
+    "@pixi/sprite": "5.2.1"
   },
-  "gitHead": "aaf96b460582b83a1fa73037ef2dd69dd9e84415"
+  "gitHead": "b56b4fca1c169f0e6d2a0472251ba1f7399bb4a3"
 }

No alert changes

Improved metrics

Total package byte prevSize

328290

increased by2.89%

Lines of code

2696

increased by3.41%

Worsened metrics

Dev dependency count

3

increased by200%

Dependency changes

• + Added@pixi/constants@5.2.1(transitive)

• + Added@pixi/core@5.2.1(transitive)

• + Added@pixi/display@5.2.1(transitive)

• + Added@pixi/math@5.2.1(transitive)

• + Added@pixi/runner@5.2.1(transitive)

• + Added@pixi/settings@5.2.1(transitive)

• + Added@pixi/ticker@5.2.1(transitive)

• + Added@pixi/utils@5.2.1(transitive)

• - Removed@pixi/constants@5.3.12(transitive)

• - Removed@pixi/core@5.3.12(transitive)

• - Removed@pixi/math@5.3.12(transitive)

• - Removed@pixi/runner@5.3.12(transitive)

• - Removed@pixi/settings@5.3.12(transitive)

• - Removed@pixi/ticker@5.3.12(transitive)

• - Removed@pixi/utils@5.3.12(transitive)

• Updated@pixi/constants@5.2.1

• Updated@pixi/core@5.2.1

• Updated@pixi/math@5.2.1

• Updated@pixi/settings@5.2.1

• Updated@pixi/utils@5.2.1