@pixi/canvas-renderer - npm Package Compare versions

Comparing version 5.4.0-rc.3 to 6.0.0-rc

dist/browser/canvas-renderer.js

 /*!
- * @pixi/canvas-renderer - v5.4.0-rc.3
- * Compiled Thu, 10 Dec 2020 03:22:17 UTC
+ * @pixi/canvas-renderer - v6.0.0-rc
+ * Compiled Tue, 29 Dec 2020 19:58:03 UTC
  *
@@ -487,3 +487,3 @@ * @pixi/canvas-renderer is licensed under the MIT License.
          * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional
-         * @param {boolean} [options.transparent=false] - If the render view is transparent, default false
+         * @param {boolean} [options.contextAlpha=true] - Pass-through value for canvas' context `alpha` property.
          * @param {boolean} [options.autoDensity=false] - Resizes renderer view in CSS pixels to allow for
@@ -500,2 +500,3 @@ *   resolutions other than 1
          *  (shown if not transparent).
+         * @param {number} [options.backgroundAlpha=1] - Value from 0 (fully transparent) to 1 (fully opaque).
          */
@@ -509,3 +510,3 @@ function CanvasRenderer(options) {
              */
-            _this.rootContext = _this.view.getContext('2d', { alpha: _this.transparent });
+            _this.rootContext = _this.view.getContext('2d', { alpha: _this.contextAlpha });
             /**
@@ -630,8 +631,8 @@ * The currently active canvas 2d context (could change with renderTextures)
                 if (this.renderingToScreen) {
-                    if (this.transparent) {
-                        context.clearRect(0, 0, this.width, this.height);
-                    }
-                    else {
+                    context.clearRect(0, 0, this.width, this.height);
+                    if (this.backgroundAlpha > 0) {
+                        context.globalAlpha = this.contextAlpha ? this.backgroundAlpha : 1;
                         context.fillStyle = this._backgroundColorString;
                         context.fillRect(0, 0, this.width, this.height);
+                        context.globalAlpha = 1;
                     }
@@ -644,4 +645,6 @@ }
                     if (clearColor[3] > 0) {
+                        context.globalAlpha = this.contextAlpha ? clearColor[3] : 1;
                         context.fillStyle = utils.hex2string(utils.rgb2hex(clearColor));
                         context.fillRect(0, 0, renderTexture.realWidth, renderTexture.realHeight);
+                        context.globalAlpha = 1;
                     }
@@ -689,13 +692,15 @@ }
          * @param {string} [clearColor] - Clear the canvas with this color, except the canvas is transparent.
+         * @param {number} [alpha] - Alpha to apply to the background fill color.
          */
-        CanvasRenderer.prototype.clear = function (clearColor) {
+        CanvasRenderer.prototype.clear = function (clearColor, alpha) {
+            if (clearColor === void 0) { clearColor = this._backgroundColorString; }
+            if (alpha === void 0) { alpha = this.backgroundAlpha; }
             var context = this.context;
-            clearColor = clearColor || this._backgroundColorString;
-            if (!this.transparent && clearColor) {
+            context.clearRect(0, 0, this.width, this.height);
+            if (clearColor) {
+                context.globalAlpha = this.contextAlpha ? alpha : 1;
                 context.fillStyle = clearColor;
                 context.fillRect(0, 0, this.width, this.height);
+                context.globalAlpha = 1;
             }
-            else {
-                context.clearRect(0, 0, this.width, this.height);
-            }
         };
@@ -702,0 +707,0 @@ /**

dist/browser/canvas-renderer.min.js

 /*!
- * @pixi/canvas-renderer - v5.4.0-rc.3
- * Compiled Thu, 10 Dec 2020 03:22:17 UTC
+ * @pixi/canvas-renderer - v6.0.0-rc
+ * Compiled Tue, 29 Dec 2020 19:58:03 UTC
  *
@@ -8,3 +8,3 @@ * @pixi/canvas-renderer is licensed under the MIT License.
  */
-this.PIXI=this.PIXI||{};var _pixi_canvas_renderer=function(e,t,r,o,n,i){"use strict";var a=function(e,t){return(a=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var r in t)t.hasOwnProperty(r)&&(e[r]=t[r])})(e,t)};var s=function(){function e(e){this.renderer=e,this._foundShapes=[]}return e.prototype.pushMask=function(e){var t=this.renderer,r=e.maskObject||e;t.context.save();var o=this._foundShapes;if(this.recursiveFindShapes(r,o),o.length>0){var n=t.context;n.beginPath();for(var i=0;i<o.length;i++){var a=o[i],s=a.transform.worldTransform;this.renderer.setContextTransform(s),this.renderGraphicsShape(a)}o.length=0,n.clip()}},e.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)},e.prototype.renderGraphicsShape=function(e){e.finishPoly();var t=this.renderer.context,r=e.geometry.graphicsData,n=r.length;if(0!==n)for(var i=0;i<n;i++){var a=r[i].shape;if(a.type===o.SHAPES.POLY){var s=a.points;t.moveTo(s[0],s[1]);for(var h=1;h<s.length/2;h++)t.lineTo(s[2*h],s[2*h+1]);s[0]===s[s.length-2]&&s[1]===s[s.length-1]&&t.closePath()}else if(a.type===o.SHAPES.RECT)t.rect(a.x,a.y,a.width,a.height),t.closePath();else if(a.type===o.SHAPES.CIRC)t.arc(a.x,a.y,a.radius,0,2*Math.PI),t.closePath();else if(a.type===o.SHAPES.ELIP){var l=2*a.width,c=2*a.height,d=a.x-l/2,u=a.y-c/2,E=l/2*.5522848,D=c/2*.5522848,p=d+l,g=u+c,_=d+l/2,S=u+c/2;t.moveTo(d,S),t.bezierCurveTo(d,S-D,_-E,u,_,u),t.bezierCurveTo(_+E,u,p,S-D,p,S),t.bezierCurveTo(p,S+D,_+E,g,_,g),t.bezierCurveTo(_-E,g,d,S+D,d,S),t.closePath()}else if(a.type===o.SHAPES.RREC){var v=a.x,O=a.y,M=a.width,f=a.height,m=a.radius,N=Math.min(M,f)/2|0;m=m>N?N:m,t.moveTo(v,O+m),t.lineTo(v,O+f-m),t.quadraticCurveTo(v,O+f,v+m,O+f),t.lineTo(v+M-m,O+f),t.quadraticCurveTo(v+M,O+f,v+M,O+f-m),t.lineTo(v+M,O+m),t.quadraticCurveTo(v+M,O,v+M-m,O),t.lineTo(v+m,O),t.quadraticCurveTo(v,O,v,O+m),t.closePath()}}},e.prototype.popMask=function(e){e.context.restore(),e.invalidateBlendMode()},e.prototype.destroy=function(){},e}();function h(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 l(){if("undefined"==typeof document)return!1;var e=h("#ff00ff"),t=h("#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 n=o.getImageData(2,0,1,1);if(!n)return!1;var i=n.data;return 255===i[0]&&0===i[1]&&0===i[2]}var c=new o.Matrix,d=function(e){function o(t){var i,a=e.call(this,n.RENDERER_TYPE.CANVAS,t)||this;if(a.rootContext=a.view.getContext("2d",{alpha:a.transparent}),a.context=a.rootContext,a.refresh=!0,a.maskManager=new s(a),a.smoothProperty="imageSmoothingEnabled",!a.rootContext.imageSmoothingEnabled){var h=a.rootContext;h.webkitImageSmoothingEnabled?a.smoothProperty="webkitImageSmoothingEnabled":h.mozImageSmoothingEnabled?a.smoothProperty="mozImageSmoothingEnabled":h.oImageSmoothingEnabled?a.smoothProperty="oImageSmoothingEnabled":h.msImageSmoothingEnabled&&(a.smoothProperty="msImageSmoothingEnabled")}return a.initPlugins(o.__plugins),a.blendModes=(void 0===i&&(i=[]),l()?(i[n.BLEND_MODES.NORMAL]="source-over",i[n.BLEND_MODES.ADD]="lighter",i[n.BLEND_MODES.MULTIPLY]="multiply",i[n.BLEND_MODES.SCREEN]="screen",i[n.BLEND_MODES.OVERLAY]="overlay",i[n.BLEND_MODES.DARKEN]="darken",i[n.BLEND_MODES.LIGHTEN]="lighten",i[n.BLEND_MODES.COLOR_DODGE]="color-dodge",i[n.BLEND_MODES.COLOR_BURN]="color-burn",i[n.BLEND_MODES.HARD_LIGHT]="hard-light",i[n.BLEND_MODES.SOFT_LIGHT]="soft-light",i[n.BLEND_MODES.DIFFERENCE]="difference",i[n.BLEND_MODES.EXCLUSION]="exclusion",i[n.BLEND_MODES.HUE]="hue",i[n.BLEND_MODES.SATURATION]="saturate",i[n.BLEND_MODES.COLOR]="color",i[n.BLEND_MODES.LUMINOSITY]="luminosity"):(i[n.BLEND_MODES.NORMAL]="source-over",i[n.BLEND_MODES.ADD]="lighter",i[n.BLEND_MODES.MULTIPLY]="source-over",i[n.BLEND_MODES.SCREEN]="source-over",i[n.BLEND_MODES.OVERLAY]="source-over",i[n.BLEND_MODES.DARKEN]="source-over",i[n.BLEND_MODES.LIGHTEN]="source-over",i[n.BLEND_MODES.COLOR_DODGE]="source-over",i[n.BLEND_MODES.COLOR_BURN]="source-over",i[n.BLEND_MODES.HARD_LIGHT]="source-over",i[n.BLEND_MODES.SOFT_LIGHT]="source-over",i[n.BLEND_MODES.DIFFERENCE]="source-over",i[n.BLEND_MODES.EXCLUSION]="source-over",i[n.BLEND_MODES.HUE]="source-over",i[n.BLEND_MODES.SATURATION]="source-over",i[n.BLEND_MODES.COLOR]="source-over",i[n.BLEND_MODES.LUMINOSITY]="source-over"),i[n.BLEND_MODES.NORMAL_NPM]=i[n.BLEND_MODES.NORMAL],i[n.BLEND_MODES.ADD_NPM]=i[n.BLEND_MODES.ADD],i[n.BLEND_MODES.SCREEN_NPM]=i[n.BLEND_MODES.SCREEN],i[n.BLEND_MODES.SRC_IN]="source-in",i[n.BLEND_MODES.SRC_OUT]="source-out",i[n.BLEND_MODES.SRC_ATOP]="source-atop",i[n.BLEND_MODES.DST_OVER]="destination-over",i[n.BLEND_MODES.DST_IN]="destination-in",i[n.BLEND_MODES.DST_OUT]="destination-out",i[n.BLEND_MODES.DST_ATOP]="destination-atop",i[n.BLEND_MODES.XOR]="xor",i[n.BLEND_MODES.SUBTRACT]="source-over",i),a._activeBlendMode=null,a._outerBlend=!1,a._projTransform=null,a.renderingToScreen=!1,r.sayHello("Canvas"),a.resize(a.options.width,a.options.height),a}return function(e,t){function r(){this.constructor=e}a(e,t),e.prototype=null===t?Object.create(t):(r.prototype=t.prototype,new r)}(o,e),o.prototype.render=function(e,o,i,a,s){if(this.view){this.renderingToScreen=!o,this.emit("prerender");var h=this.resolution;o?((o=o.castToBaseTexture())._canvasRenderTarget||(o._canvasRenderTarget=new r.CanvasRenderTarget(o.width,o.height,o.resolution),o.resource=new t.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(this._projTransform=a||null,o||(this._lastObjectRendered=e),!s){var c=e.enableTempParent();e.updateTransform(),e.disableTempParent(c)}if(l.save(),l.setTransform(1,0,0,1,0,0),l.globalAlpha=1,this._activeBlendMode=n.BLEND_MODES.NORMAL,this._outerBlend=!1,l.globalCompositeOperation=this.blendModes[n.BLEND_MODES.NORMAL],void 0!==i?i:this.clearBeforeRender)if(this.renderingToScreen)this.transparent?l.clearRect(0,0,this.width,this.height):(l.fillStyle=this._backgroundColorString,l.fillRect(0,0,this.width,this.height));else{(o=o)._canvasRenderTarget.clear();var d=o.clearColor;d[3]>0&&(l.fillStyle=r.hex2string(r.rgb2hex(d)),l.fillRect(0,0,o.realWidth,o.realHeight))}var u=this.context;this.context=l,e.renderCanvas(this),this.context=u,l.restore(),this.resolution=h,this._projTransform=null,this.emit("postrender")}},o.prototype.setContextTransform=function(e,t,r){var o=e,n=this._projTransform,i=this.resolution;r=r||i,n&&((o=c).copyFrom(e),o.prepend(n)),t?this.context.setTransform(o.a*r,o.b*r,o.c*r,o.d*r,o.tx*i|0,o.ty*i|0):this.context.setTransform(o.a*r,o.b*r,o.c*r,o.d*r,o.tx*i,o.ty*i)},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===n.BLEND_MODES.SRC_IN||e===n.BLEND_MODES.SRC_OUT||e===n.BLEND_MODES.DST_IN||e===n.BLEND_MODES.DST_ATOP;!t&&r&&(e=n.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]=i.settings.SCALE_MODE===n.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),u={canvas:null,getTintedCanvas:function(e,t){var r=e.texture,o="#"+("00000"+(0|(t=u.roundColor(t))).toString(16)).substr(-6);r.tintCache=r.tintCache||{};var n,i=r.tintCache[o];if(i){if(i.tintId===r._updateID)return r.tintCache[o];n=r.tintCache[o]}else n=document.createElement("canvas");if(u.tintMethod(r,t,n),n.tintId=r._updateID,u.convertTintToImage){var a=new Image;a.src=n.toDataURL(),r.tintCache[o]=a}else r.tintCache[o]=n;return n},getTintedPattern:function(e,t){var r="#"+("00000"+(0|(t=u.roundColor(t))).toString(16)).substr(-6);e.patternCache=e.patternCache||{};var o=e.patternCache[r];return o&&o.tintId===e._updateID?o:(u.canvas||(u.canvas=document.createElement("canvas")),u.tintMethod(e,t,u.canvas),(o=u.canvas.getContext("2d").createPattern(u.canvas,"repeat")).tintId=e._updateID,e.patternCache[r]=o,o)},tintWithMultiply:function(e,t,r){var o=r.getContext("2d"),n=e._frame.clone(),i=e.baseTexture.resolution;n.x*=i,n.y*=i,n.width*=i,n.height*=i,r.width=Math.ceil(n.width),r.height=Math.ceil(n.height),o.save(),o.fillStyle="#"+("00000"+(0|t).toString(16)).substr(-6),o.fillRect(0,0,n.width,n.height),o.globalCompositeOperation="multiply";var a=e.baseTexture.getDrawableSource();o.drawImage(a,n.x,n.y,n.width,n.height,0,0,n.width,n.height),o.globalCompositeOperation="destination-atop",o.drawImage(a,n.x,n.y,n.width,n.height,0,0,n.width,n.height),o.restore()},tintWithOverlay:function(e,t,r){var o=r.getContext("2d"),n=e._frame.clone(),i=e.baseTexture.resolution;n.x*=i,n.y*=i,n.width*=i,n.height*=i,r.width=Math.ceil(n.width),r.height=Math.ceil(n.height),o.save(),o.globalCompositeOperation="copy",o.fillStyle="#"+("00000"+(0|t).toString(16)).substr(-6),o.fillRect(0,0,n.width,n.height),o.globalCompositeOperation="destination-atop",o.drawImage(e.baseTexture.getDrawableSource(),n.x,n.y,n.width,n.height,0,0,n.width,n.height),o.restore()},tintWithPerPixel:function(e,t,o){var n=o.getContext("2d"),i=e._frame.clone(),a=e.baseTexture.resolution;i.x*=a,i.y*=a,i.width*=a,i.height*=a,o.width=Math.ceil(i.width),o.height=Math.ceil(i.height),n.save(),n.globalCompositeOperation="copy",n.drawImage(e.baseTexture.getDrawableSource(),i.x,i.y,i.width,i.height,0,0,i.width,i.height),n.restore();for(var s=r.hex2rgb(t),h=s[0],l=s[1],c=s[2],d=n.getImageData(0,0,i.width,i.height),u=d.data,E=0;E<u.length;E+=4)u[E+0]*=h,u[E+1]*=l,u[E+2]*=c;n.putImageData(d,0,0)},roundColor:function(e){var t=u.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:l(),tintMethod:null};u.tintMethod=u.canUseMultiply?u.tintWithMultiply:u.tintWithPerPixel;var E=t.Renderer.create;return t.Renderer.create=function(e){if(!(e&&e.forceCanvas))try{return E(e)}catch(e){}return new d(e)},t.BaseTexture.prototype.getDrawableSource=function(){var e=this.resource;return e?e.bitmap||e.source:null},t.BaseRenderTexture.prototype._canvasRenderTarget=null,t.Texture.prototype.patternCache=null,t.Texture.prototype.tintCache=null,e.CanvasRenderer=d,e.canUseNewCanvasBlendModes=l,e.canvasUtils=u,e}({},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,n,i){"use strict";var a=function(e,t){return(a=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var r in t)t.hasOwnProperty(r)&&(e[r]=t[r])})(e,t)};var s=function(){function e(e){this.renderer=e,this._foundShapes=[]}return e.prototype.pushMask=function(e){var t=this.renderer,r=e.maskObject||e;t.context.save();var o=this._foundShapes;if(this.recursiveFindShapes(r,o),o.length>0){var n=t.context;n.beginPath();for(var i=0;i<o.length;i++){var a=o[i],s=a.transform.worldTransform;this.renderer.setContextTransform(s),this.renderGraphicsShape(a)}o.length=0,n.clip()}},e.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)},e.prototype.renderGraphicsShape=function(e){e.finishPoly();var t=this.renderer.context,r=e.geometry.graphicsData,n=r.length;if(0!==n)for(var i=0;i<n;i++){var a=r[i].shape;if(a.type===o.SHAPES.POLY){var s=a.points;t.moveTo(s[0],s[1]);for(var h=1;h<s.length/2;h++)t.lineTo(s[2*h],s[2*h+1]);s[0]===s[s.length-2]&&s[1]===s[s.length-1]&&t.closePath()}else if(a.type===o.SHAPES.RECT)t.rect(a.x,a.y,a.width,a.height),t.closePath();else if(a.type===o.SHAPES.CIRC)t.arc(a.x,a.y,a.radius,0,2*Math.PI),t.closePath();else if(a.type===o.SHAPES.ELIP){var l=2*a.width,c=2*a.height,d=a.x-l/2,u=a.y-c/2,E=l/2*.5522848,p=c/2*.5522848,g=d+l,D=u+c,_=d+l/2,v=u+c/2;t.moveTo(d,v),t.bezierCurveTo(d,v-p,_-E,u,_,u),t.bezierCurveTo(_+E,u,g,v-p,g,v),t.bezierCurveTo(g,v+p,_+E,D,_,D),t.bezierCurveTo(_-E,D,d,v+p,d,v),t.closePath()}else if(a.type===o.SHAPES.RREC){var S=a.x,O=a.y,M=a.width,f=a.height,m=a.radius,N=Math.min(M,f)/2|0;m=m>N?N:m,t.moveTo(S,O+m),t.lineTo(S,O+f-m),t.quadraticCurveTo(S,O+f,S+m,O+f),t.lineTo(S+M-m,O+f),t.quadraticCurveTo(S+M,O+f,S+M,O+f-m),t.lineTo(S+M,O+m),t.quadraticCurveTo(S+M,O,S+M-m,O),t.lineTo(S+m,O),t.quadraticCurveTo(S,O,S,O+m),t.closePath()}}},e.prototype.popMask=function(e){e.context.restore(),e.invalidateBlendMode()},e.prototype.destroy=function(){},e}();function h(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 l(){if("undefined"==typeof document)return!1;var e=h("#ff00ff"),t=h("#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 n=o.getImageData(2,0,1,1);if(!n)return!1;var i=n.data;return 255===i[0]&&0===i[1]&&0===i[2]}var c=new o.Matrix,d=function(e){function o(t){var i,a=e.call(this,n.RENDERER_TYPE.CANVAS,t)||this;if(a.rootContext=a.view.getContext("2d",{alpha:a.contextAlpha}),a.context=a.rootContext,a.refresh=!0,a.maskManager=new s(a),a.smoothProperty="imageSmoothingEnabled",!a.rootContext.imageSmoothingEnabled){var h=a.rootContext;h.webkitImageSmoothingEnabled?a.smoothProperty="webkitImageSmoothingEnabled":h.mozImageSmoothingEnabled?a.smoothProperty="mozImageSmoothingEnabled":h.oImageSmoothingEnabled?a.smoothProperty="oImageSmoothingEnabled":h.msImageSmoothingEnabled&&(a.smoothProperty="msImageSmoothingEnabled")}return a.initPlugins(o.__plugins),a.blendModes=(void 0===i&&(i=[]),l()?(i[n.BLEND_MODES.NORMAL]="source-over",i[n.BLEND_MODES.ADD]="lighter",i[n.BLEND_MODES.MULTIPLY]="multiply",i[n.BLEND_MODES.SCREEN]="screen",i[n.BLEND_MODES.OVERLAY]="overlay",i[n.BLEND_MODES.DARKEN]="darken",i[n.BLEND_MODES.LIGHTEN]="lighten",i[n.BLEND_MODES.COLOR_DODGE]="color-dodge",i[n.BLEND_MODES.COLOR_BURN]="color-burn",i[n.BLEND_MODES.HARD_LIGHT]="hard-light",i[n.BLEND_MODES.SOFT_LIGHT]="soft-light",i[n.BLEND_MODES.DIFFERENCE]="difference",i[n.BLEND_MODES.EXCLUSION]="exclusion",i[n.BLEND_MODES.HUE]="hue",i[n.BLEND_MODES.SATURATION]="saturate",i[n.BLEND_MODES.COLOR]="color",i[n.BLEND_MODES.LUMINOSITY]="luminosity"):(i[n.BLEND_MODES.NORMAL]="source-over",i[n.BLEND_MODES.ADD]="lighter",i[n.BLEND_MODES.MULTIPLY]="source-over",i[n.BLEND_MODES.SCREEN]="source-over",i[n.BLEND_MODES.OVERLAY]="source-over",i[n.BLEND_MODES.DARKEN]="source-over",i[n.BLEND_MODES.LIGHTEN]="source-over",i[n.BLEND_MODES.COLOR_DODGE]="source-over",i[n.BLEND_MODES.COLOR_BURN]="source-over",i[n.BLEND_MODES.HARD_LIGHT]="source-over",i[n.BLEND_MODES.SOFT_LIGHT]="source-over",i[n.BLEND_MODES.DIFFERENCE]="source-over",i[n.BLEND_MODES.EXCLUSION]="source-over",i[n.BLEND_MODES.HUE]="source-over",i[n.BLEND_MODES.SATURATION]="source-over",i[n.BLEND_MODES.COLOR]="source-over",i[n.BLEND_MODES.LUMINOSITY]="source-over"),i[n.BLEND_MODES.NORMAL_NPM]=i[n.BLEND_MODES.NORMAL],i[n.BLEND_MODES.ADD_NPM]=i[n.BLEND_MODES.ADD],i[n.BLEND_MODES.SCREEN_NPM]=i[n.BLEND_MODES.SCREEN],i[n.BLEND_MODES.SRC_IN]="source-in",i[n.BLEND_MODES.SRC_OUT]="source-out",i[n.BLEND_MODES.SRC_ATOP]="source-atop",i[n.BLEND_MODES.DST_OVER]="destination-over",i[n.BLEND_MODES.DST_IN]="destination-in",i[n.BLEND_MODES.DST_OUT]="destination-out",i[n.BLEND_MODES.DST_ATOP]="destination-atop",i[n.BLEND_MODES.XOR]="xor",i[n.BLEND_MODES.SUBTRACT]="source-over",i),a._activeBlendMode=null,a._outerBlend=!1,a._projTransform=null,a.renderingToScreen=!1,r.sayHello("Canvas"),a.resize(a.options.width,a.options.height),a}return function(e,t){function r(){this.constructor=e}a(e,t),e.prototype=null===t?Object.create(t):(r.prototype=t.prototype,new r)}(o,e),o.prototype.render=function(e,o,i,a,s){if(this.view){this.renderingToScreen=!o,this.emit("prerender");var h=this.resolution;o?((o=o.castToBaseTexture())._canvasRenderTarget||(o._canvasRenderTarget=new r.CanvasRenderTarget(o.width,o.height,o.resolution),o.resource=new t.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(this._projTransform=a||null,o||(this._lastObjectRendered=e),!s){var c=e.enableTempParent();e.updateTransform(),e.disableTempParent(c)}if(l.save(),l.setTransform(1,0,0,1,0,0),l.globalAlpha=1,this._activeBlendMode=n.BLEND_MODES.NORMAL,this._outerBlend=!1,l.globalCompositeOperation=this.blendModes[n.BLEND_MODES.NORMAL],void 0!==i?i:this.clearBeforeRender)if(this.renderingToScreen)l.clearRect(0,0,this.width,this.height),this.backgroundAlpha>0&&(l.globalAlpha=this.contextAlpha?this.backgroundAlpha:1,l.fillStyle=this._backgroundColorString,l.fillRect(0,0,this.width,this.height),l.globalAlpha=1);else{(o=o)._canvasRenderTarget.clear();var d=o.clearColor;d[3]>0&&(l.globalAlpha=this.contextAlpha?d[3]:1,l.fillStyle=r.hex2string(r.rgb2hex(d)),l.fillRect(0,0,o.realWidth,o.realHeight),l.globalAlpha=1)}var u=this.context;this.context=l,e.renderCanvas(this),this.context=u,l.restore(),this.resolution=h,this._projTransform=null,this.emit("postrender")}},o.prototype.setContextTransform=function(e,t,r){var o=e,n=this._projTransform,i=this.resolution;r=r||i,n&&((o=c).copyFrom(e),o.prepend(n)),t?this.context.setTransform(o.a*r,o.b*r,o.c*r,o.d*r,o.tx*i|0,o.ty*i|0):this.context.setTransform(o.a*r,o.b*r,o.c*r,o.d*r,o.tx*i,o.ty*i)},o.prototype.clear=function(e,t){void 0===e&&(e=this._backgroundColorString),void 0===t&&(t=this.backgroundAlpha);var r=this.context;r.clearRect(0,0,this.width,this.height),e&&(r.globalAlpha=this.contextAlpha?t:1,r.fillStyle=e,r.fillRect(0,0,this.width,this.height),r.globalAlpha=1)},o.prototype.setBlendMode=function(e,t){var r=e===n.BLEND_MODES.SRC_IN||e===n.BLEND_MODES.SRC_OUT||e===n.BLEND_MODES.DST_IN||e===n.BLEND_MODES.DST_ATOP;!t&&r&&(e=n.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]=i.settings.SCALE_MODE===n.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),u={canvas:null,getTintedCanvas:function(e,t){var r=e.texture,o="#"+("00000"+(0|(t=u.roundColor(t))).toString(16)).substr(-6);r.tintCache=r.tintCache||{};var n,i=r.tintCache[o];if(i){if(i.tintId===r._updateID)return r.tintCache[o];n=r.tintCache[o]}else n=document.createElement("canvas");if(u.tintMethod(r,t,n),n.tintId=r._updateID,u.convertTintToImage){var a=new Image;a.src=n.toDataURL(),r.tintCache[o]=a}else r.tintCache[o]=n;return n},getTintedPattern:function(e,t){var r="#"+("00000"+(0|(t=u.roundColor(t))).toString(16)).substr(-6);e.patternCache=e.patternCache||{};var o=e.patternCache[r];return o&&o.tintId===e._updateID?o:(u.canvas||(u.canvas=document.createElement("canvas")),u.tintMethod(e,t,u.canvas),(o=u.canvas.getContext("2d").createPattern(u.canvas,"repeat")).tintId=e._updateID,e.patternCache[r]=o,o)},tintWithMultiply:function(e,t,r){var o=r.getContext("2d"),n=e._frame.clone(),i=e.baseTexture.resolution;n.x*=i,n.y*=i,n.width*=i,n.height*=i,r.width=Math.ceil(n.width),r.height=Math.ceil(n.height),o.save(),o.fillStyle="#"+("00000"+(0|t).toString(16)).substr(-6),o.fillRect(0,0,n.width,n.height),o.globalCompositeOperation="multiply";var a=e.baseTexture.getDrawableSource();o.drawImage(a,n.x,n.y,n.width,n.height,0,0,n.width,n.height),o.globalCompositeOperation="destination-atop",o.drawImage(a,n.x,n.y,n.width,n.height,0,0,n.width,n.height),o.restore()},tintWithOverlay:function(e,t,r){var o=r.getContext("2d"),n=e._frame.clone(),i=e.baseTexture.resolution;n.x*=i,n.y*=i,n.width*=i,n.height*=i,r.width=Math.ceil(n.width),r.height=Math.ceil(n.height),o.save(),o.globalCompositeOperation="copy",o.fillStyle="#"+("00000"+(0|t).toString(16)).substr(-6),o.fillRect(0,0,n.width,n.height),o.globalCompositeOperation="destination-atop",o.drawImage(e.baseTexture.getDrawableSource(),n.x,n.y,n.width,n.height,0,0,n.width,n.height),o.restore()},tintWithPerPixel:function(e,t,o){var n=o.getContext("2d"),i=e._frame.clone(),a=e.baseTexture.resolution;i.x*=a,i.y*=a,i.width*=a,i.height*=a,o.width=Math.ceil(i.width),o.height=Math.ceil(i.height),n.save(),n.globalCompositeOperation="copy",n.drawImage(e.baseTexture.getDrawableSource(),i.x,i.y,i.width,i.height,0,0,i.width,i.height),n.restore();for(var s=r.hex2rgb(t),h=s[0],l=s[1],c=s[2],d=n.getImageData(0,0,i.width,i.height),u=d.data,E=0;E<u.length;E+=4)u[E+0]*=h,u[E+1]*=l,u[E+2]*=c;n.putImageData(d,0,0)},roundColor:function(e){var t=u.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:l(),tintMethod:null};u.tintMethod=u.canUseMultiply?u.tintWithMultiply:u.tintWithPerPixel;var E=t.Renderer.create;return t.Renderer.create=function(e){if(!(e&&e.forceCanvas))try{return E(e)}catch(e){}return new d(e)},t.BaseTexture.prototype.getDrawableSource=function(){var e=this.resource;return e?e.bitmap||e.source:null},t.BaseRenderTexture.prototype._canvasRenderTarget=null,t.Texture.prototype.patternCache=null,t.Texture.prototype.tintCache=null,e.CanvasRenderer=d,e.canUseNewCanvasBlendModes=l,e.canvasUtils=u,e}({},PIXI,PIXI.utils,PIXI,PIXI,PIXI);Object.assign(this.PIXI,_pixi_canvas_renderer);
 //# sourceMappingURL=canvas-renderer.min.js.map

dist/cjs/canvas-renderer.js

 /*!
- * @pixi/canvas-renderer - v5.4.0-rc.3
- * Compiled Thu, 10 Dec 2020 03:22:17 UTC
+ * @pixi/canvas-renderer - v6.0.0-rc
+ * Compiled Tue, 29 Dec 2020 19:58:03 UTC
  *
@@ -331,3 +331,3 @@ * @pixi/canvas-renderer is licensed under the MIT License.
      * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional
-     * @param {boolean} [options.transparent=false] - If the render view is transparent, default false
+     * @param {boolean} [options.contextAlpha=true] - Pass-through value for canvas' context `alpha` property.
      * @param {boolean} [options.autoDensity=false] - Resizes renderer view in CSS pixels to allow for
@@ -344,2 +344,3 @@ *   resolutions other than 1
      *  (shown if not transparent).
+     * @param {number} [options.backgroundAlpha=1] - Value from 0 (fully transparent) to 1 (fully opaque).
      */
@@ -353,3 +354,3 @@ function CanvasRenderer(options) {
          */
-        _this.rootContext = _this.view.getContext('2d', { alpha: _this.transparent });
+        _this.rootContext = _this.view.getContext('2d', { alpha: _this.contextAlpha });
         /**
@@ -474,8 +475,8 @@ * The currently active canvas 2d context (could change with renderTextures)
             if (this.renderingToScreen) {
-                if (this.transparent) {
-                    context.clearRect(0, 0, this.width, this.height);
-                }
-                else {
+                context.clearRect(0, 0, this.width, this.height);
+                if (this.backgroundAlpha > 0) {
+                    context.globalAlpha = this.contextAlpha ? this.backgroundAlpha : 1;
                     context.fillStyle = this._backgroundColorString;
                     context.fillRect(0, 0, this.width, this.height);
+                    context.globalAlpha = 1;
                 }
@@ -488,4 +489,6 @@ }
                 if (clearColor[3] > 0) {
+                    context.globalAlpha = this.contextAlpha ? clearColor[3] : 1;
                     context.fillStyle = utils.hex2string(utils.rgb2hex(clearColor));
                     context.fillRect(0, 0, renderTexture.realWidth, renderTexture.realHeight);
+                    context.globalAlpha = 1;
                 }
@@ -533,13 +536,15 @@ }
      * @param {string} [clearColor] - Clear the canvas with this color, except the canvas is transparent.
+     * @param {number} [alpha] - Alpha to apply to the background fill color.
      */
-    CanvasRenderer.prototype.clear = function (clearColor) {
+    CanvasRenderer.prototype.clear = function (clearColor, alpha) {
+        if (clearColor === void 0) { clearColor = this._backgroundColorString; }
+        if (alpha === void 0) { alpha = this.backgroundAlpha; }
         var context = this.context;
-        clearColor = clearColor || this._backgroundColorString;
-        if (!this.transparent && clearColor) {
+        context.clearRect(0, 0, this.width, this.height);
+        if (clearColor) {
+            context.globalAlpha = this.contextAlpha ? alpha : 1;
             context.fillStyle = clearColor;
             context.fillRect(0, 0, this.width, this.height);
+            context.globalAlpha = 1;
         }
-        else {
-            context.clearRect(0, 0, this.width, this.height);
-        }
     };
@@ -546,0 +551,0 @@ /**

dist/cjs/canvas-renderer.min.js

 /*!
- * @pixi/canvas-renderer - v5.4.0-rc.3
- * Compiled Thu, 10 Dec 2020 03:22:17 UTC
+ * @pixi/canvas-renderer - v6.0.0-rc
+ * Compiled Tue, 29 Dec 2020 19:58:03 UTC
  *
@@ -8,3 +8,3 @@ * @pixi/canvas-renderer is licensed under the MIT License.
  */
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@pixi/core"),utils=require("@pixi/utils"),math=require("@pixi/math"),constants=require("@pixi/constants"),settings=require("@pixi/settings"),extendStatics=function(t,e){return(extendStatics=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n])})(t,e)};function __extends(t,e){function n(){this.constructor=t}extendStatics(t,e),t.prototype=null===e?Object.create(e):(n.prototype=e.prototype,new n)}var CanvasMaskManager=function(){function t(t){this.renderer=t,this._foundShapes=[]}return t.prototype.pushMask=function(t){var e=this.renderer,n=t.maskObject||t;e.context.save();var o=this._foundShapes;if(this.recursiveFindShapes(n,o),o.length>0){var a=e.context;a.beginPath();for(var r=0;r<o.length;r++){var s=o[r],i=s.transform.worldTransform;this.renderer.setContextTransform(i),this.renderGraphicsShape(s)}o.length=0,a.clip()}},t.prototype.recursiveFindShapes=function(t,e){t.geometry&&t.geometry.graphicsData&&e.push(t);var n=t.children;if(n)for(var o=0;o<n.length;o++)this.recursiveFindShapes(n[o],e)},t.prototype.renderGraphicsShape=function(t){t.finishPoly();var e=this.renderer.context,n=t.geometry.graphicsData,o=n.length;if(0!==o)for(var a=0;a<o;a++){var r=n[a].shape;if(r.type===math.SHAPES.POLY){var s=r.points;e.moveTo(s[0],s[1]);for(var i=1;i<s.length/2;i++)e.lineTo(s[2*i],s[2*i+1]);s[0]===s[s.length-2]&&s[1]===s[s.length-1]&&e.closePath()}else if(r.type===math.SHAPES.RECT)e.rect(r.x,r.y,r.width,r.height),e.closePath();else if(r.type===math.SHAPES.CIRC)e.arc(r.x,r.y,r.radius,0,2*Math.PI),e.closePath();else if(r.type===math.SHAPES.ELIP){var c=2*r.width,h=2*r.height,l=r.x-c/2,d=r.y-h/2,u=c/2*.5522848,E=h/2*.5522848,p=l+c,v=d+h,D=l+c/2,g=d+h/2;e.moveTo(l,g),e.bezierCurveTo(l,g-E,D-u,d,D,d),e.bezierCurveTo(D+u,d,p,g-E,p,g),e.bezierCurveTo(p,g+E,D+u,v,D,v),e.bezierCurveTo(D-u,v,l,g+E,l,g),e.closePath()}else if(r.type===math.SHAPES.RREC){var S=r.x,_=r.y,M=r.width,O=r.height,m=r.radius,f=Math.min(M,O)/2|0;m=m>f?f:m,e.moveTo(S,_+m),e.lineTo(S,_+O-m),e.quadraticCurveTo(S,_+O,S+m,_+O),e.lineTo(S+M-m,_+O),e.quadraticCurveTo(S+M,_+O,S+M,_+O-m),e.lineTo(S+M,_+m),e.quadraticCurveTo(S+M,_,S+M-m,_),e.lineTo(S+m,_),e.quadraticCurveTo(S,_,S,_+m),e.closePath()}}},t.prototype.popMask=function(t){t.context.restore(),t.invalidateBlendMode()},t.prototype.destroy=function(){},t}();function createColoredCanvas(t){var e=document.createElement("canvas");e.width=6,e.height=1;var n=e.getContext("2d");return n.fillStyle=t,n.fillRect(0,0,6,1),e}function canUseNewCanvasBlendModes(){if("undefined"==typeof document)return!1;var t=createColoredCanvas("#ff00ff"),e=createColoredCanvas("#ffff00"),n=document.createElement("canvas");n.width=6,n.height=1;var o=n.getContext("2d");o.globalCompositeOperation="multiply",o.drawImage(t,0,0),o.drawImage(e,2,0);var a=o.getImageData(2,0,1,1);if(!a)return!1;var r=a.data;return 255===r[0]&&0===r[1]&&0===r[2]}function mapCanvasBlendModesToPixi(t){return void 0===t&&(t=[]),canUseNewCanvasBlendModes()?(t[constants.BLEND_MODES.NORMAL]="source-over",t[constants.BLEND_MODES.ADD]="lighter",t[constants.BLEND_MODES.MULTIPLY]="multiply",t[constants.BLEND_MODES.SCREEN]="screen",t[constants.BLEND_MODES.OVERLAY]="overlay",t[constants.BLEND_MODES.DARKEN]="darken",t[constants.BLEND_MODES.LIGHTEN]="lighten",t[constants.BLEND_MODES.COLOR_DODGE]="color-dodge",t[constants.BLEND_MODES.COLOR_BURN]="color-burn",t[constants.BLEND_MODES.HARD_LIGHT]="hard-light",t[constants.BLEND_MODES.SOFT_LIGHT]="soft-light",t[constants.BLEND_MODES.DIFFERENCE]="difference",t[constants.BLEND_MODES.EXCLUSION]="exclusion",t[constants.BLEND_MODES.HUE]="hue",t[constants.BLEND_MODES.SATURATION]="saturate",t[constants.BLEND_MODES.COLOR]="color",t[constants.BLEND_MODES.LUMINOSITY]="luminosity"):(t[constants.BLEND_MODES.NORMAL]="source-over",t[constants.BLEND_MODES.ADD]="lighter",t[constants.BLEND_MODES.MULTIPLY]="source-over",t[constants.BLEND_MODES.SCREEN]="source-over",t[constants.BLEND_MODES.OVERLAY]="source-over",t[constants.BLEND_MODES.DARKEN]="source-over",t[constants.BLEND_MODES.LIGHTEN]="source-over",t[constants.BLEND_MODES.COLOR_DODGE]="source-over",t[constants.BLEND_MODES.COLOR_BURN]="source-over",t[constants.BLEND_MODES.HARD_LIGHT]="source-over",t[constants.BLEND_MODES.SOFT_LIGHT]="source-over",t[constants.BLEND_MODES.DIFFERENCE]="source-over",t[constants.BLEND_MODES.EXCLUSION]="source-over",t[constants.BLEND_MODES.HUE]="source-over",t[constants.BLEND_MODES.SATURATION]="source-over",t[constants.BLEND_MODES.COLOR]="source-over",t[constants.BLEND_MODES.LUMINOSITY]="source-over"),t[constants.BLEND_MODES.NORMAL_NPM]=t[constants.BLEND_MODES.NORMAL],t[constants.BLEND_MODES.ADD_NPM]=t[constants.BLEND_MODES.ADD],t[constants.BLEND_MODES.SCREEN_NPM]=t[constants.BLEND_MODES.SCREEN],t[constants.BLEND_MODES.SRC_IN]="source-in",t[constants.BLEND_MODES.SRC_OUT]="source-out",t[constants.BLEND_MODES.SRC_ATOP]="source-atop",t[constants.BLEND_MODES.DST_OVER]="destination-over",t[constants.BLEND_MODES.DST_IN]="destination-in",t[constants.BLEND_MODES.DST_OUT]="destination-out",t[constants.BLEND_MODES.DST_ATOP]="destination-atop",t[constants.BLEND_MODES.XOR]="xor",t[constants.BLEND_MODES.SUBTRACT]="source-over",t}var tempMatrix=new math.Matrix,CanvasRenderer=function(t){function e(n){var o=t.call(this,constants.RENDERER_TYPE.CANVAS,n)||this;if(o.rootContext=o.view.getContext("2d",{alpha:o.transparent}),o.context=o.rootContext,o.refresh=!0,o.maskManager=new CanvasMaskManager(o),o.smoothProperty="imageSmoothingEnabled",!o.rootContext.imageSmoothingEnabled){var a=o.rootContext;a.webkitImageSmoothingEnabled?o.smoothProperty="webkitImageSmoothingEnabled":a.mozImageSmoothingEnabled?o.smoothProperty="mozImageSmoothingEnabled":a.oImageSmoothingEnabled?o.smoothProperty="oImageSmoothingEnabled":a.msImageSmoothingEnabled&&(o.smoothProperty="msImageSmoothingEnabled")}return o.initPlugins(e.__plugins),o.blendModes=mapCanvasBlendModesToPixi(),o._activeBlendMode=null,o._outerBlend=!1,o._projTransform=null,o.renderingToScreen=!1,utils.sayHello("Canvas"),o.resize(o.options.width,o.options.height),o}return __extends(e,t),e.prototype.render=function(t,e,n,o,a){if(this.view){this.renderingToScreen=!e,this.emit("prerender");var r=this.resolution;e?((e=e.castToBaseTexture())._canvasRenderTarget||(e._canvasRenderTarget=new utils.CanvasRenderTarget(e.width,e.height,e.resolution),e.resource=new core.CanvasResource(e._canvasRenderTarget.canvas),e.valid=!0),this.context=e._canvasRenderTarget.context,this.resolution=e._canvasRenderTarget.resolution):this.context=this.rootContext;var s=this.context;if(this._projTransform=o||null,e||(this._lastObjectRendered=t),!a){var i=t.enableTempParent();t.updateTransform(),t.disableTempParent(i)}if(s.save(),s.setTransform(1,0,0,1,0,0),s.globalAlpha=1,this._activeBlendMode=constants.BLEND_MODES.NORMAL,this._outerBlend=!1,s.globalCompositeOperation=this.blendModes[constants.BLEND_MODES.NORMAL],void 0!==n?n:this.clearBeforeRender)if(this.renderingToScreen)this.transparent?s.clearRect(0,0,this.width,this.height):(s.fillStyle=this._backgroundColorString,s.fillRect(0,0,this.width,this.height));else{(e=e)._canvasRenderTarget.clear();var c=e.clearColor;c[3]>0&&(s.fillStyle=utils.hex2string(utils.rgb2hex(c)),s.fillRect(0,0,e.realWidth,e.realHeight))}var h=this.context;this.context=s,t.renderCanvas(this),this.context=h,s.restore(),this.resolution=r,this._projTransform=null,this.emit("postrender")}},e.prototype.setContextTransform=function(t,e,n){var o=t,a=this._projTransform,r=this.resolution;n=n||r,a&&((o=tempMatrix).copyFrom(t),o.prepend(a)),e?this.context.setTransform(o.a*n,o.b*n,o.c*n,o.d*n,o.tx*r|0,o.ty*r|0):this.context.setTransform(o.a*n,o.b*n,o.c*n,o.d*n,o.tx*r,o.ty*r)},e.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)},e.prototype.setBlendMode=function(t,e){var n=t===constants.BLEND_MODES.SRC_IN||t===constants.BLEND_MODES.SRC_OUT||t===constants.BLEND_MODES.DST_IN||t===constants.BLEND_MODES.DST_ATOP;!e&&n&&(t=constants.BLEND_MODES.NORMAL),this._activeBlendMode!==t&&(this._activeBlendMode=t,this._outerBlend=n,this.context.globalCompositeOperation=this.blendModes[t])},e.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},e.prototype.resize=function(e,n){t.prototype.resize.call(this,e,n),this.smoothProperty&&(this.rootContext[this.smoothProperty]=settings.settings.SCALE_MODE===constants.SCALE_MODES.LINEAR)},e.prototype.invalidateBlendMode=function(){this._activeBlendMode=this.blendModes.indexOf(this.context.globalCompositeOperation)},e.registerPlugin=function(t,n){e.__plugins=e.__plugins||{},e.__plugins[t]=n},e}(core.AbstractRenderer),canvasUtils={canvas:null,getTintedCanvas:function(t,e){var n=t.texture,o="#"+("00000"+(0|(e=canvasUtils.roundColor(e))).toString(16)).substr(-6);n.tintCache=n.tintCache||{};var a,r=n.tintCache[o];if(r){if(r.tintId===n._updateID)return n.tintCache[o];a=n.tintCache[o]}else a=document.createElement("canvas");if(canvasUtils.tintMethod(n,e,a),a.tintId=n._updateID,canvasUtils.convertTintToImage){var s=new Image;s.src=a.toDataURL(),n.tintCache[o]=s}else n.tintCache[o]=a;return a},getTintedPattern:function(t,e){var n="#"+("00000"+(0|(e=canvasUtils.roundColor(e))).toString(16)).substr(-6);t.patternCache=t.patternCache||{};var o=t.patternCache[n];return o&&o.tintId===t._updateID?o:(canvasUtils.canvas||(canvasUtils.canvas=document.createElement("canvas")),canvasUtils.tintMethod(t,e,canvasUtils.canvas),(o=canvasUtils.canvas.getContext("2d").createPattern(canvasUtils.canvas,"repeat")).tintId=t._updateID,t.patternCache[n]=o,o)},tintWithMultiply:function(t,e,n){var o=n.getContext("2d"),a=t._frame.clone(),r=t.baseTexture.resolution;a.x*=r,a.y*=r,a.width*=r,a.height*=r,n.width=Math.ceil(a.width),n.height=Math.ceil(a.height),o.save(),o.fillStyle="#"+("00000"+(0|e).toString(16)).substr(-6),o.fillRect(0,0,a.width,a.height),o.globalCompositeOperation="multiply";var s=t.baseTexture.getDrawableSource();o.drawImage(s,a.x,a.y,a.width,a.height,0,0,a.width,a.height),o.globalCompositeOperation="destination-atop",o.drawImage(s,a.x,a.y,a.width,a.height,0,0,a.width,a.height),o.restore()},tintWithOverlay:function(t,e,n){var o=n.getContext("2d"),a=t._frame.clone(),r=t.baseTexture.resolution;a.x*=r,a.y*=r,a.width*=r,a.height*=r,n.width=Math.ceil(a.width),n.height=Math.ceil(a.height),o.save(),o.globalCompositeOperation="copy",o.fillStyle="#"+("00000"+(0|e).toString(16)).substr(-6),o.fillRect(0,0,a.width,a.height),o.globalCompositeOperation="destination-atop",o.drawImage(t.baseTexture.getDrawableSource(),a.x,a.y,a.width,a.height,0,0,a.width,a.height),o.restore()},tintWithPerPixel:function(t,e,n){var o=n.getContext("2d"),a=t._frame.clone(),r=t.baseTexture.resolution;a.x*=r,a.y*=r,a.width*=r,a.height*=r,n.width=Math.ceil(a.width),n.height=Math.ceil(a.height),o.save(),o.globalCompositeOperation="copy",o.drawImage(t.baseTexture.getDrawableSource(),a.x,a.y,a.width,a.height,0,0,a.width,a.height),o.restore();for(var s=utils.hex2rgb(e),i=s[0],c=s[1],h=s[2],l=o.getImageData(0,0,a.width,a.height),d=l.data,u=0;u<d.length;u+=4)d[u+0]*=i,d[u+1]*=c,d[u+2]*=h;o.putImageData(l,0,0)},roundColor:function(t){var e=canvasUtils.cacheStepsPerColorChannel,n=utils.hex2rgb(t);return n[0]=Math.min(255,n[0]/e*e),n[1]=Math.min(255,n[1]/e*e),n[2]=Math.min(255,n[2]/e*e),utils.rgb2hex(n)},cacheStepsPerColorChannel:8,convertTintToImage:!1,canUseMultiply:canUseNewCanvasBlendModes(),tintMethod:null};canvasUtils.tintMethod=canvasUtils.canUseMultiply?canvasUtils.tintWithMultiply:canvasUtils.tintWithPerPixel;var parentCreate=core.Renderer.create;core.Renderer.create=function(t){if(!(t&&t.forceCanvas))try{return parentCreate(t)}catch(t){}return new CanvasRenderer(t)},core.BaseTexture.prototype.getDrawableSource=function(){var t=this.resource;return t?t.bitmap||t.source:null},core.BaseRenderTexture.prototype._canvasRenderTarget=null,core.Texture.prototype.patternCache=null,core.Texture.prototype.tintCache=null,exports.CanvasRenderer=CanvasRenderer,exports.canUseNewCanvasBlendModes=canUseNewCanvasBlendModes,exports.canvasUtils=canvasUtils;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@pixi/core"),utils=require("@pixi/utils"),math=require("@pixi/math"),constants=require("@pixi/constants"),settings=require("@pixi/settings"),extendStatics=function(t,e){return(extendStatics=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n])})(t,e)};function __extends(t,e){function n(){this.constructor=t}extendStatics(t,e),t.prototype=null===e?Object.create(e):(n.prototype=e.prototype,new n)}var CanvasMaskManager=function(){function t(t){this.renderer=t,this._foundShapes=[]}return t.prototype.pushMask=function(t){var e=this.renderer,n=t.maskObject||t;e.context.save();var o=this._foundShapes;if(this.recursiveFindShapes(n,o),o.length>0){var a=e.context;a.beginPath();for(var r=0;r<o.length;r++){var s=o[r],i=s.transform.worldTransform;this.renderer.setContextTransform(i),this.renderGraphicsShape(s)}o.length=0,a.clip()}},t.prototype.recursiveFindShapes=function(t,e){t.geometry&&t.geometry.graphicsData&&e.push(t);var n=t.children;if(n)for(var o=0;o<n.length;o++)this.recursiveFindShapes(n[o],e)},t.prototype.renderGraphicsShape=function(t){t.finishPoly();var e=this.renderer.context,n=t.geometry.graphicsData,o=n.length;if(0!==o)for(var a=0;a<o;a++){var r=n[a].shape;if(r.type===math.SHAPES.POLY){var s=r.points;e.moveTo(s[0],s[1]);for(var i=1;i<s.length/2;i++)e.lineTo(s[2*i],s[2*i+1]);s[0]===s[s.length-2]&&s[1]===s[s.length-1]&&e.closePath()}else if(r.type===math.SHAPES.RECT)e.rect(r.x,r.y,r.width,r.height),e.closePath();else if(r.type===math.SHAPES.CIRC)e.arc(r.x,r.y,r.radius,0,2*Math.PI),e.closePath();else if(r.type===math.SHAPES.ELIP){var c=2*r.width,h=2*r.height,l=r.x-c/2,d=r.y-h/2,u=c/2*.5522848,p=h/2*.5522848,E=l+c,v=d+h,g=l+c/2,D=d+h/2;e.moveTo(l,D),e.bezierCurveTo(l,D-p,g-u,d,g,d),e.bezierCurveTo(g+u,d,E,D-p,E,D),e.bezierCurveTo(E,D+p,g+u,v,g,v),e.bezierCurveTo(g-u,v,l,D+p,l,D),e.closePath()}else if(r.type===math.SHAPES.RREC){var S=r.x,_=r.y,M=r.width,O=r.height,m=r.radius,f=Math.min(M,O)/2|0;m=m>f?f:m,e.moveTo(S,_+m),e.lineTo(S,_+O-m),e.quadraticCurveTo(S,_+O,S+m,_+O),e.lineTo(S+M-m,_+O),e.quadraticCurveTo(S+M,_+O,S+M,_+O-m),e.lineTo(S+M,_+m),e.quadraticCurveTo(S+M,_,S+M-m,_),e.lineTo(S+m,_),e.quadraticCurveTo(S,_,S,_+m),e.closePath()}}},t.prototype.popMask=function(t){t.context.restore(),t.invalidateBlendMode()},t.prototype.destroy=function(){},t}();function createColoredCanvas(t){var e=document.createElement("canvas");e.width=6,e.height=1;var n=e.getContext("2d");return n.fillStyle=t,n.fillRect(0,0,6,1),e}function canUseNewCanvasBlendModes(){if("undefined"==typeof document)return!1;var t=createColoredCanvas("#ff00ff"),e=createColoredCanvas("#ffff00"),n=document.createElement("canvas");n.width=6,n.height=1;var o=n.getContext("2d");o.globalCompositeOperation="multiply",o.drawImage(t,0,0),o.drawImage(e,2,0);var a=o.getImageData(2,0,1,1);if(!a)return!1;var r=a.data;return 255===r[0]&&0===r[1]&&0===r[2]}function mapCanvasBlendModesToPixi(t){return void 0===t&&(t=[]),canUseNewCanvasBlendModes()?(t[constants.BLEND_MODES.NORMAL]="source-over",t[constants.BLEND_MODES.ADD]="lighter",t[constants.BLEND_MODES.MULTIPLY]="multiply",t[constants.BLEND_MODES.SCREEN]="screen",t[constants.BLEND_MODES.OVERLAY]="overlay",t[constants.BLEND_MODES.DARKEN]="darken",t[constants.BLEND_MODES.LIGHTEN]="lighten",t[constants.BLEND_MODES.COLOR_DODGE]="color-dodge",t[constants.BLEND_MODES.COLOR_BURN]="color-burn",t[constants.BLEND_MODES.HARD_LIGHT]="hard-light",t[constants.BLEND_MODES.SOFT_LIGHT]="soft-light",t[constants.BLEND_MODES.DIFFERENCE]="difference",t[constants.BLEND_MODES.EXCLUSION]="exclusion",t[constants.BLEND_MODES.HUE]="hue",t[constants.BLEND_MODES.SATURATION]="saturate",t[constants.BLEND_MODES.COLOR]="color",t[constants.BLEND_MODES.LUMINOSITY]="luminosity"):(t[constants.BLEND_MODES.NORMAL]="source-over",t[constants.BLEND_MODES.ADD]="lighter",t[constants.BLEND_MODES.MULTIPLY]="source-over",t[constants.BLEND_MODES.SCREEN]="source-over",t[constants.BLEND_MODES.OVERLAY]="source-over",t[constants.BLEND_MODES.DARKEN]="source-over",t[constants.BLEND_MODES.LIGHTEN]="source-over",t[constants.BLEND_MODES.COLOR_DODGE]="source-over",t[constants.BLEND_MODES.COLOR_BURN]="source-over",t[constants.BLEND_MODES.HARD_LIGHT]="source-over",t[constants.BLEND_MODES.SOFT_LIGHT]="source-over",t[constants.BLEND_MODES.DIFFERENCE]="source-over",t[constants.BLEND_MODES.EXCLUSION]="source-over",t[constants.BLEND_MODES.HUE]="source-over",t[constants.BLEND_MODES.SATURATION]="source-over",t[constants.BLEND_MODES.COLOR]="source-over",t[constants.BLEND_MODES.LUMINOSITY]="source-over"),t[constants.BLEND_MODES.NORMAL_NPM]=t[constants.BLEND_MODES.NORMAL],t[constants.BLEND_MODES.ADD_NPM]=t[constants.BLEND_MODES.ADD],t[constants.BLEND_MODES.SCREEN_NPM]=t[constants.BLEND_MODES.SCREEN],t[constants.BLEND_MODES.SRC_IN]="source-in",t[constants.BLEND_MODES.SRC_OUT]="source-out",t[constants.BLEND_MODES.SRC_ATOP]="source-atop",t[constants.BLEND_MODES.DST_OVER]="destination-over",t[constants.BLEND_MODES.DST_IN]="destination-in",t[constants.BLEND_MODES.DST_OUT]="destination-out",t[constants.BLEND_MODES.DST_ATOP]="destination-atop",t[constants.BLEND_MODES.XOR]="xor",t[constants.BLEND_MODES.SUBTRACT]="source-over",t}var tempMatrix=new math.Matrix,CanvasRenderer=function(t){function e(n){var o=t.call(this,constants.RENDERER_TYPE.CANVAS,n)||this;if(o.rootContext=o.view.getContext("2d",{alpha:o.contextAlpha}),o.context=o.rootContext,o.refresh=!0,o.maskManager=new CanvasMaskManager(o),o.smoothProperty="imageSmoothingEnabled",!o.rootContext.imageSmoothingEnabled){var a=o.rootContext;a.webkitImageSmoothingEnabled?o.smoothProperty="webkitImageSmoothingEnabled":a.mozImageSmoothingEnabled?o.smoothProperty="mozImageSmoothingEnabled":a.oImageSmoothingEnabled?o.smoothProperty="oImageSmoothingEnabled":a.msImageSmoothingEnabled&&(o.smoothProperty="msImageSmoothingEnabled")}return o.initPlugins(e.__plugins),o.blendModes=mapCanvasBlendModesToPixi(),o._activeBlendMode=null,o._outerBlend=!1,o._projTransform=null,o.renderingToScreen=!1,utils.sayHello("Canvas"),o.resize(o.options.width,o.options.height),o}return __extends(e,t),e.prototype.render=function(t,e,n,o,a){if(this.view){this.renderingToScreen=!e,this.emit("prerender");var r=this.resolution;e?((e=e.castToBaseTexture())._canvasRenderTarget||(e._canvasRenderTarget=new utils.CanvasRenderTarget(e.width,e.height,e.resolution),e.resource=new core.CanvasResource(e._canvasRenderTarget.canvas),e.valid=!0),this.context=e._canvasRenderTarget.context,this.resolution=e._canvasRenderTarget.resolution):this.context=this.rootContext;var s=this.context;if(this._projTransform=o||null,e||(this._lastObjectRendered=t),!a){var i=t.enableTempParent();t.updateTransform(),t.disableTempParent(i)}if(s.save(),s.setTransform(1,0,0,1,0,0),s.globalAlpha=1,this._activeBlendMode=constants.BLEND_MODES.NORMAL,this._outerBlend=!1,s.globalCompositeOperation=this.blendModes[constants.BLEND_MODES.NORMAL],void 0!==n?n:this.clearBeforeRender)if(this.renderingToScreen)s.clearRect(0,0,this.width,this.height),this.backgroundAlpha>0&&(s.globalAlpha=this.contextAlpha?this.backgroundAlpha:1,s.fillStyle=this._backgroundColorString,s.fillRect(0,0,this.width,this.height),s.globalAlpha=1);else{(e=e)._canvasRenderTarget.clear();var c=e.clearColor;c[3]>0&&(s.globalAlpha=this.contextAlpha?c[3]:1,s.fillStyle=utils.hex2string(utils.rgb2hex(c)),s.fillRect(0,0,e.realWidth,e.realHeight),s.globalAlpha=1)}var h=this.context;this.context=s,t.renderCanvas(this),this.context=h,s.restore(),this.resolution=r,this._projTransform=null,this.emit("postrender")}},e.prototype.setContextTransform=function(t,e,n){var o=t,a=this._projTransform,r=this.resolution;n=n||r,a&&((o=tempMatrix).copyFrom(t),o.prepend(a)),e?this.context.setTransform(o.a*n,o.b*n,o.c*n,o.d*n,o.tx*r|0,o.ty*r|0):this.context.setTransform(o.a*n,o.b*n,o.c*n,o.d*n,o.tx*r,o.ty*r)},e.prototype.clear=function(t,e){void 0===t&&(t=this._backgroundColorString),void 0===e&&(e=this.backgroundAlpha);var n=this.context;n.clearRect(0,0,this.width,this.height),t&&(n.globalAlpha=this.contextAlpha?e:1,n.fillStyle=t,n.fillRect(0,0,this.width,this.height),n.globalAlpha=1)},e.prototype.setBlendMode=function(t,e){var n=t===constants.BLEND_MODES.SRC_IN||t===constants.BLEND_MODES.SRC_OUT||t===constants.BLEND_MODES.DST_IN||t===constants.BLEND_MODES.DST_ATOP;!e&&n&&(t=constants.BLEND_MODES.NORMAL),this._activeBlendMode!==t&&(this._activeBlendMode=t,this._outerBlend=n,this.context.globalCompositeOperation=this.blendModes[t])},e.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},e.prototype.resize=function(e,n){t.prototype.resize.call(this,e,n),this.smoothProperty&&(this.rootContext[this.smoothProperty]=settings.settings.SCALE_MODE===constants.SCALE_MODES.LINEAR)},e.prototype.invalidateBlendMode=function(){this._activeBlendMode=this.blendModes.indexOf(this.context.globalCompositeOperation)},e.registerPlugin=function(t,n){e.__plugins=e.__plugins||{},e.__plugins[t]=n},e}(core.AbstractRenderer),canvasUtils={canvas:null,getTintedCanvas:function(t,e){var n=t.texture,o="#"+("00000"+(0|(e=canvasUtils.roundColor(e))).toString(16)).substr(-6);n.tintCache=n.tintCache||{};var a,r=n.tintCache[o];if(r){if(r.tintId===n._updateID)return n.tintCache[o];a=n.tintCache[o]}else a=document.createElement("canvas");if(canvasUtils.tintMethod(n,e,a),a.tintId=n._updateID,canvasUtils.convertTintToImage){var s=new Image;s.src=a.toDataURL(),n.tintCache[o]=s}else n.tintCache[o]=a;return a},getTintedPattern:function(t,e){var n="#"+("00000"+(0|(e=canvasUtils.roundColor(e))).toString(16)).substr(-6);t.patternCache=t.patternCache||{};var o=t.patternCache[n];return o&&o.tintId===t._updateID?o:(canvasUtils.canvas||(canvasUtils.canvas=document.createElement("canvas")),canvasUtils.tintMethod(t,e,canvasUtils.canvas),(o=canvasUtils.canvas.getContext("2d").createPattern(canvasUtils.canvas,"repeat")).tintId=t._updateID,t.patternCache[n]=o,o)},tintWithMultiply:function(t,e,n){var o=n.getContext("2d"),a=t._frame.clone(),r=t.baseTexture.resolution;a.x*=r,a.y*=r,a.width*=r,a.height*=r,n.width=Math.ceil(a.width),n.height=Math.ceil(a.height),o.save(),o.fillStyle="#"+("00000"+(0|e).toString(16)).substr(-6),o.fillRect(0,0,a.width,a.height),o.globalCompositeOperation="multiply";var s=t.baseTexture.getDrawableSource();o.drawImage(s,a.x,a.y,a.width,a.height,0,0,a.width,a.height),o.globalCompositeOperation="destination-atop",o.drawImage(s,a.x,a.y,a.width,a.height,0,0,a.width,a.height),o.restore()},tintWithOverlay:function(t,e,n){var o=n.getContext("2d"),a=t._frame.clone(),r=t.baseTexture.resolution;a.x*=r,a.y*=r,a.width*=r,a.height*=r,n.width=Math.ceil(a.width),n.height=Math.ceil(a.height),o.save(),o.globalCompositeOperation="copy",o.fillStyle="#"+("00000"+(0|e).toString(16)).substr(-6),o.fillRect(0,0,a.width,a.height),o.globalCompositeOperation="destination-atop",o.drawImage(t.baseTexture.getDrawableSource(),a.x,a.y,a.width,a.height,0,0,a.width,a.height),o.restore()},tintWithPerPixel:function(t,e,n){var o=n.getContext("2d"),a=t._frame.clone(),r=t.baseTexture.resolution;a.x*=r,a.y*=r,a.width*=r,a.height*=r,n.width=Math.ceil(a.width),n.height=Math.ceil(a.height),o.save(),o.globalCompositeOperation="copy",o.drawImage(t.baseTexture.getDrawableSource(),a.x,a.y,a.width,a.height,0,0,a.width,a.height),o.restore();for(var s=utils.hex2rgb(e),i=s[0],c=s[1],h=s[2],l=o.getImageData(0,0,a.width,a.height),d=l.data,u=0;u<d.length;u+=4)d[u+0]*=i,d[u+1]*=c,d[u+2]*=h;o.putImageData(l,0,0)},roundColor:function(t){var e=canvasUtils.cacheStepsPerColorChannel,n=utils.hex2rgb(t);return n[0]=Math.min(255,n[0]/e*e),n[1]=Math.min(255,n[1]/e*e),n[2]=Math.min(255,n[2]/e*e),utils.rgb2hex(n)},cacheStepsPerColorChannel:8,convertTintToImage:!1,canUseMultiply:canUseNewCanvasBlendModes(),tintMethod:null};canvasUtils.tintMethod=canvasUtils.canUseMultiply?canvasUtils.tintWithMultiply:canvasUtils.tintWithPerPixel;var parentCreate=core.Renderer.create;core.Renderer.create=function(t){if(!(t&&t.forceCanvas))try{return parentCreate(t)}catch(t){}return new CanvasRenderer(t)},core.BaseTexture.prototype.getDrawableSource=function(){var t=this.resource;return t?t.bitmap||t.source:null},core.BaseRenderTexture.prototype._canvasRenderTarget=null,core.Texture.prototype.patternCache=null,core.Texture.prototype.tintCache=null,exports.CanvasRenderer=CanvasRenderer,exports.canUseNewCanvasBlendModes=canUseNewCanvasBlendModes,exports.canvasUtils=canvasUtils;
 //# sourceMappingURL=canvas-renderer.min.js.map

dist/esm/canvas-renderer.js

 /*!
- * @pixi/canvas-renderer - v5.4.0-rc.3
- * Compiled Thu, 10 Dec 2020 03:22:17 UTC
+ * @pixi/canvas-renderer - v6.0.0-rc
+ * Compiled Tue, 29 Dec 2020 19:58:03 UTC
  *
@@ -327,3 +327,3 @@ * @pixi/canvas-renderer is licensed under the MIT License.
      * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional
-     * @param {boolean} [options.transparent=false] - If the render view is transparent, default false
+     * @param {boolean} [options.contextAlpha=true] - Pass-through value for canvas' context `alpha` property.
      * @param {boolean} [options.autoDensity=false] - Resizes renderer view in CSS pixels to allow for
@@ -340,2 +340,3 @@ *   resolutions other than 1
      *  (shown if not transparent).
+     * @param {number} [options.backgroundAlpha=1] - Value from 0 (fully transparent) to 1 (fully opaque).
      */
@@ -349,3 +350,3 @@ function CanvasRenderer(options) {
          */
-        _this.rootContext = _this.view.getContext('2d', { alpha: _this.transparent });
+        _this.rootContext = _this.view.getContext('2d', { alpha: _this.contextAlpha });
         /**
@@ -470,8 +471,8 @@ * The currently active canvas 2d context (could change with renderTextures)
             if (this.renderingToScreen) {
-                if (this.transparent) {
-                    context.clearRect(0, 0, this.width, this.height);
-                }
-                else {
+                context.clearRect(0, 0, this.width, this.height);
+                if (this.backgroundAlpha > 0) {
+                    context.globalAlpha = this.contextAlpha ? this.backgroundAlpha : 1;
                     context.fillStyle = this._backgroundColorString;
                     context.fillRect(0, 0, this.width, this.height);
+                    context.globalAlpha = 1;
                 }
@@ -484,4 +485,6 @@ }
                 if (clearColor[3] > 0) {
+                    context.globalAlpha = this.contextAlpha ? clearColor[3] : 1;
                     context.fillStyle = hex2string(rgb2hex(clearColor));
                     context.fillRect(0, 0, renderTexture.realWidth, renderTexture.realHeight);
+                    context.globalAlpha = 1;
                 }
@@ -529,13 +532,15 @@ }
      * @param {string} [clearColor] - Clear the canvas with this color, except the canvas is transparent.
+     * @param {number} [alpha] - Alpha to apply to the background fill color.
      */
-    CanvasRenderer.prototype.clear = function (clearColor) {
+    CanvasRenderer.prototype.clear = function (clearColor, alpha) {
+        if (clearColor === void 0) { clearColor = this._backgroundColorString; }
+        if (alpha === void 0) { alpha = this.backgroundAlpha; }
         var context = this.context;
-        clearColor = clearColor || this._backgroundColorString;
-        if (!this.transparent && clearColor) {
+        context.clearRect(0, 0, this.width, this.height);
+        if (clearColor) {
+            context.globalAlpha = this.contextAlpha ? alpha : 1;
             context.fillStyle = clearColor;
             context.fillRect(0, 0, this.width, this.height);
+            context.globalAlpha = 1;
         }
-        else {
-            context.clearRect(0, 0, this.width, this.height);
-        }
     };
@@ -542,0 +547,0 @@ /**

dist/esm/canvas-renderer.min.js

 /*!
- * @pixi/canvas-renderer - v5.4.0-rc.3
- * Compiled Thu, 10 Dec 2020 03:22:17 UTC
+ * @pixi/canvas-renderer - v6.0.0-rc
+ * Compiled Tue, 29 Dec 2020 19:58:03 UTC
  *
@@ -8,3 +8,3 @@ * @pixi/canvas-renderer is licensed under the MIT License.
  */
-import{CanvasResource as t,AbstractRenderer as e,Renderer as r,BaseTexture as o,BaseRenderTexture as i,Texture as n}from"@pixi/core";import{CanvasRenderTarget as a,hex2string as s,rgb2hex as h,sayHello as l,hex2rgb as c}from"@pixi/utils";import{SHAPES as u,Matrix as d}from"@pixi/math";import{BLEND_MODES as p,SCALE_MODES as g,RENDERER_TYPE as v}from"@pixi/constants";import{settings as f}from"@pixi/settings";var m=function(t,e){return(m=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var r in e)e.hasOwnProperty(r)&&(t[r]=e[r])})(t,e)};var C=function(){function t(t){this.renderer=t,this._foundShapes=[]}return t.prototype.pushMask=function(t){var e=this.renderer,r=t.maskObject||t;e.context.save();var o=this._foundShapes;if(this.recursiveFindShapes(r,o),o.length>0){var i=e.context;i.beginPath();for(var n=0;n<o.length;n++){var a=o[n],s=a.transform.worldTransform;this.renderer.setContextTransform(s),this.renderGraphicsShape(a)}o.length=0,i.clip()}},t.prototype.recursiveFindShapes=function(t,e){t.geometry&&t.geometry.graphicsData&&e.push(t);var r=t.children;if(r)for(var o=0;o<r.length;o++)this.recursiveFindShapes(r[o],e)},t.prototype.renderGraphicsShape=function(t){t.finishPoly();var e=this.renderer.context,r=t.geometry.graphicsData,o=r.length;if(0!==o)for(var i=0;i<o;i++){var n=r[i].shape;if(n.type===u.POLY){var a=n.points;e.moveTo(a[0],a[1]);for(var s=1;s<a.length/2;s++)e.lineTo(a[2*s],a[2*s+1]);a[0]===a[a.length-2]&&a[1]===a[a.length-1]&&e.closePath()}else if(n.type===u.RECT)e.rect(n.x,n.y,n.width,n.height),e.closePath();else if(n.type===u.CIRC)e.arc(n.x,n.y,n.radius,0,2*Math.PI),e.closePath();else if(n.type===u.ELIP){var h=2*n.width,l=2*n.height,c=n.x-h/2,d=n.y-l/2,p=h/2*.5522848,g=l/2*.5522848,v=c+h,f=d+l,m=c+h/2,C=d+l/2;e.moveTo(c,C),e.bezierCurveTo(c,C-g,m-p,d,m,d),e.bezierCurveTo(m+p,d,v,C-g,v,C),e.bezierCurveTo(v,C+g,m+p,f,m,f),e.bezierCurveTo(m-p,f,c,C+g,c,C),e.closePath()}else if(n.type===u.RREC){var T=n.x,y=n.y,_=n.width,x=n.height,S=n.radius,R=Math.min(_,x)/2|0;S=S>R?R:S,e.moveTo(T,y+S),e.lineTo(T,y+x-S),e.quadraticCurveTo(T,y+x,T+S,y+x),e.lineTo(T+_-S,y+x),e.quadraticCurveTo(T+_,y+x,T+_,y+x-S),e.lineTo(T+_,y+S),e.quadraticCurveTo(T+_,y,T+_-S,y),e.lineTo(T+S,y),e.quadraticCurveTo(T,y,T,y+S),e.closePath()}}},t.prototype.popMask=function(t){t.context.restore(),t.invalidateBlendMode()},t.prototype.destroy=function(){},t}();function T(t){var e=document.createElement("canvas");e.width=6,e.height=1;var r=e.getContext("2d");return r.fillStyle=t,r.fillRect(0,0,6,1),e}function y(){if("undefined"==typeof document)return!1;var t=T("#ff00ff"),e=T("#ffff00"),r=document.createElement("canvas");r.width=6,r.height=1;var o=r.getContext("2d");o.globalCompositeOperation="multiply",o.drawImage(t,0,0),o.drawImage(e,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]}var _=new d,x=function(e){function r(t){var o,i=e.call(this,v.CANVAS,t)||this;if(i.rootContext=i.view.getContext("2d",{alpha:i.transparent}),i.context=i.rootContext,i.refresh=!0,i.maskManager=new C(i),i.smoothProperty="imageSmoothingEnabled",!i.rootContext.imageSmoothingEnabled){var n=i.rootContext;n.webkitImageSmoothingEnabled?i.smoothProperty="webkitImageSmoothingEnabled":n.mozImageSmoothingEnabled?i.smoothProperty="mozImageSmoothingEnabled":n.oImageSmoothingEnabled?i.smoothProperty="oImageSmoothingEnabled":n.msImageSmoothingEnabled&&(i.smoothProperty="msImageSmoothingEnabled")}return i.initPlugins(r.__plugins),i.blendModes=(void 0===o&&(o=[]),y()?(o[p.NORMAL]="source-over",o[p.ADD]="lighter",o[p.MULTIPLY]="multiply",o[p.SCREEN]="screen",o[p.OVERLAY]="overlay",o[p.DARKEN]="darken",o[p.LIGHTEN]="lighten",o[p.COLOR_DODGE]="color-dodge",o[p.COLOR_BURN]="color-burn",o[p.HARD_LIGHT]="hard-light",o[p.SOFT_LIGHT]="soft-light",o[p.DIFFERENCE]="difference",o[p.EXCLUSION]="exclusion",o[p.HUE]="hue",o[p.SATURATION]="saturate",o[p.COLOR]="color",o[p.LUMINOSITY]="luminosity"):(o[p.NORMAL]="source-over",o[p.ADD]="lighter",o[p.MULTIPLY]="source-over",o[p.SCREEN]="source-over",o[p.OVERLAY]="source-over",o[p.DARKEN]="source-over",o[p.LIGHTEN]="source-over",o[p.COLOR_DODGE]="source-over",o[p.COLOR_BURN]="source-over",o[p.HARD_LIGHT]="source-over",o[p.SOFT_LIGHT]="source-over",o[p.DIFFERENCE]="source-over",o[p.EXCLUSION]="source-over",o[p.HUE]="source-over",o[p.SATURATION]="source-over",o[p.COLOR]="source-over",o[p.LUMINOSITY]="source-over"),o[p.NORMAL_NPM]=o[p.NORMAL],o[p.ADD_NPM]=o[p.ADD],o[p.SCREEN_NPM]=o[p.SCREEN],o[p.SRC_IN]="source-in",o[p.SRC_OUT]="source-out",o[p.SRC_ATOP]="source-atop",o[p.DST_OVER]="destination-over",o[p.DST_IN]="destination-in",o[p.DST_OUT]="destination-out",o[p.DST_ATOP]="destination-atop",o[p.XOR]="xor",o[p.SUBTRACT]="source-over",o),i._activeBlendMode=null,i._outerBlend=!1,i._projTransform=null,i.renderingToScreen=!1,l("Canvas"),i.resize(i.options.width,i.options.height),i}return function(t,e){function r(){this.constructor=t}m(t,e),t.prototype=null===e?Object.create(e):(r.prototype=e.prototype,new r)}(r,e),r.prototype.render=function(e,r,o,i,n){if(this.view){this.renderingToScreen=!r,this.emit("prerender");var l=this.resolution;r?((r=r.castToBaseTexture())._canvasRenderTarget||(r._canvasRenderTarget=new a(r.width,r.height,r.resolution),r.resource=new t(r._canvasRenderTarget.canvas),r.valid=!0),this.context=r._canvasRenderTarget.context,this.resolution=r._canvasRenderTarget.resolution):this.context=this.rootContext;var c=this.context;if(this._projTransform=i||null,r||(this._lastObjectRendered=e),!n){var u=e.enableTempParent();e.updateTransform(),e.disableTempParent(u)}if(c.save(),c.setTransform(1,0,0,1,0,0),c.globalAlpha=1,this._activeBlendMode=p.NORMAL,this._outerBlend=!1,c.globalCompositeOperation=this.blendModes[p.NORMAL],void 0!==o?o:this.clearBeforeRender)if(this.renderingToScreen)this.transparent?c.clearRect(0,0,this.width,this.height):(c.fillStyle=this._backgroundColorString,c.fillRect(0,0,this.width,this.height));else{(r=r)._canvasRenderTarget.clear();var d=r.clearColor;d[3]>0&&(c.fillStyle=s(h(d)),c.fillRect(0,0,r.realWidth,r.realHeight))}var g=this.context;this.context=c,e.renderCanvas(this),this.context=g,c.restore(),this.resolution=l,this._projTransform=null,this.emit("postrender")}},r.prototype.setContextTransform=function(t,e,r){var o=t,i=this._projTransform,n=this.resolution;r=r||n,i&&((o=_).copyFrom(t),o.prepend(i)),e?this.context.setTransform(o.a*r,o.b*r,o.c*r,o.d*r,o.tx*n|0,o.ty*n|0):this.context.setTransform(o.a*r,o.b*r,o.c*r,o.d*r,o.tx*n,o.ty*n)},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 r=t===p.SRC_IN||t===p.SRC_OUT||t===p.DST_IN||t===p.DST_ATOP;!e&&r&&(t=p.NORMAL),this._activeBlendMode!==t&&(this._activeBlendMode=t,this._outerBlend=r,this.context.globalCompositeOperation=this.blendModes[t])},r.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},r.prototype.resize=function(t,r){e.prototype.resize.call(this,t,r),this.smoothProperty&&(this.rootContext[this.smoothProperty]=f.SCALE_MODE===g.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),S={canvas:null,getTintedCanvas:function(t,e){var r=t.texture,o="#"+("00000"+(0|(e=S.roundColor(e))).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=document.createElement("canvas");if(S.tintMethod(r,e,i),i.tintId=r._updateID,S.convertTintToImage){var a=new Image;a.src=i.toDataURL(),r.tintCache[o]=a}else r.tintCache[o]=i;return i},getTintedPattern:function(t,e){var r="#"+("00000"+(0|(e=S.roundColor(e))).toString(16)).substr(-6);t.patternCache=t.patternCache||{};var o=t.patternCache[r];return o&&o.tintId===t._updateID?o:(S.canvas||(S.canvas=document.createElement("canvas")),S.tintMethod(t,e,S.canvas),(o=S.canvas.getContext("2d").createPattern(S.canvas,"repeat")).tintId=t._updateID,t.patternCache[r]=o,o)},tintWithMultiply:function(t,e,r){var o=r.getContext("2d"),i=t._frame.clone(),n=t.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|e).toString(16)).substr(-6),o.fillRect(0,0,i.width,i.height),o.globalCompositeOperation="multiply";var a=t.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(t,e,r){var o=r.getContext("2d"),i=t._frame.clone(),n=t.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|e).toString(16)).substr(-6),o.fillRect(0,0,i.width,i.height),o.globalCompositeOperation="destination-atop",o.drawImage(t.baseTexture.getDrawableSource(),i.x,i.y,i.width,i.height,0,0,i.width,i.height),o.restore()},tintWithPerPixel:function(t,e,r){var o=r.getContext("2d"),i=t._frame.clone(),n=t.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.drawImage(t.baseTexture.getDrawableSource(),i.x,i.y,i.width,i.height,0,0,i.width,i.height),o.restore();for(var a=c(e),s=a[0],h=a[1],l=a[2],u=o.getImageData(0,0,i.width,i.height),d=u.data,p=0;p<d.length;p+=4)d[p+0]*=s,d[p+1]*=h,d[p+2]*=l;o.putImageData(u,0,0)},roundColor:function(t){var e=S.cacheStepsPerColorChannel,r=c(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),h(r)},cacheStepsPerColorChannel:8,convertTintToImage:!1,canUseMultiply:y(),tintMethod:null};S.tintMethod=S.canUseMultiply?S.tintWithMultiply:S.tintWithPerPixel;var R=r.create;r.create=function(t){if(!(t&&t.forceCanvas))try{return R(t)}catch(t){}return new x(t)},o.prototype.getDrawableSource=function(){var t=this.resource;return t?t.bitmap||t.source:null},i.prototype._canvasRenderTarget=null,n.prototype.patternCache=null,n.prototype.tintCache=null;export{x as CanvasRenderer,y as canUseNewCanvasBlendModes,S as canvasUtils};
+import{CanvasResource as t,AbstractRenderer as e,Renderer as o,BaseTexture as r,BaseRenderTexture as i,Texture as n}from"@pixi/core";import{CanvasRenderTarget as a,hex2string as h,rgb2hex as s,sayHello as l,hex2rgb as c}from"@pixi/utils";import{SHAPES as d,Matrix as u}from"@pixi/math";import{BLEND_MODES as p,SCALE_MODES as g,RENDERER_TYPE as v}from"@pixi/constants";import{settings as f}from"@pixi/settings";var m=function(t,e){return(m=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var o in e)e.hasOwnProperty(o)&&(t[o]=e[o])})(t,e)};var C=function(){function t(t){this.renderer=t,this._foundShapes=[]}return t.prototype.pushMask=function(t){var e=this.renderer,o=t.maskObject||t;e.context.save();var r=this._foundShapes;if(this.recursiveFindShapes(o,r),r.length>0){var i=e.context;i.beginPath();for(var n=0;n<r.length;n++){var a=r[n],h=a.transform.worldTransform;this.renderer.setContextTransform(h),this.renderGraphicsShape(a)}r.length=0,i.clip()}},t.prototype.recursiveFindShapes=function(t,e){t.geometry&&t.geometry.graphicsData&&e.push(t);var o=t.children;if(o)for(var r=0;r<o.length;r++)this.recursiveFindShapes(o[r],e)},t.prototype.renderGraphicsShape=function(t){t.finishPoly();var e=this.renderer.context,o=t.geometry.graphicsData,r=o.length;if(0!==r)for(var i=0;i<r;i++){var n=o[i].shape;if(n.type===d.POLY){var a=n.points;e.moveTo(a[0],a[1]);for(var h=1;h<a.length/2;h++)e.lineTo(a[2*h],a[2*h+1]);a[0]===a[a.length-2]&&a[1]===a[a.length-1]&&e.closePath()}else if(n.type===d.RECT)e.rect(n.x,n.y,n.width,n.height),e.closePath();else if(n.type===d.CIRC)e.arc(n.x,n.y,n.radius,0,2*Math.PI),e.closePath();else if(n.type===d.ELIP){var s=2*n.width,l=2*n.height,c=n.x-s/2,u=n.y-l/2,p=s/2*.5522848,g=l/2*.5522848,v=c+s,f=u+l,m=c+s/2,C=u+l/2;e.moveTo(c,C),e.bezierCurveTo(c,C-g,m-p,u,m,u),e.bezierCurveTo(m+p,u,v,C-g,v,C),e.bezierCurveTo(v,C+g,m+p,f,m,f),e.bezierCurveTo(m-p,f,c,C+g,c,C),e.closePath()}else if(n.type===d.RREC){var T=n.x,y=n.y,_=n.width,x=n.height,b=n.radius,S=Math.min(_,x)/2|0;b=b>S?S:b,e.moveTo(T,y+b),e.lineTo(T,y+x-b),e.quadraticCurveTo(T,y+x,T+b,y+x),e.lineTo(T+_-b,y+x),e.quadraticCurveTo(T+_,y+x,T+_,y+x-b),e.lineTo(T+_,y+b),e.quadraticCurveTo(T+_,y,T+_-b,y),e.lineTo(T+b,y),e.quadraticCurveTo(T,y,T,y+b),e.closePath()}}},t.prototype.popMask=function(t){t.context.restore(),t.invalidateBlendMode()},t.prototype.destroy=function(){},t}();function T(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 y(){if("undefined"==typeof document)return!1;var t=T("#ff00ff"),e=T("#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]}var _=new u,x=function(e){function o(t){var r,i=e.call(this,v.CANVAS,t)||this;if(i.rootContext=i.view.getContext("2d",{alpha:i.contextAlpha}),i.context=i.rootContext,i.refresh=!0,i.maskManager=new C(i),i.smoothProperty="imageSmoothingEnabled",!i.rootContext.imageSmoothingEnabled){var n=i.rootContext;n.webkitImageSmoothingEnabled?i.smoothProperty="webkitImageSmoothingEnabled":n.mozImageSmoothingEnabled?i.smoothProperty="mozImageSmoothingEnabled":n.oImageSmoothingEnabled?i.smoothProperty="oImageSmoothingEnabled":n.msImageSmoothingEnabled&&(i.smoothProperty="msImageSmoothingEnabled")}return i.initPlugins(o.__plugins),i.blendModes=(void 0===r&&(r=[]),y()?(r[p.NORMAL]="source-over",r[p.ADD]="lighter",r[p.MULTIPLY]="multiply",r[p.SCREEN]="screen",r[p.OVERLAY]="overlay",r[p.DARKEN]="darken",r[p.LIGHTEN]="lighten",r[p.COLOR_DODGE]="color-dodge",r[p.COLOR_BURN]="color-burn",r[p.HARD_LIGHT]="hard-light",r[p.SOFT_LIGHT]="soft-light",r[p.DIFFERENCE]="difference",r[p.EXCLUSION]="exclusion",r[p.HUE]="hue",r[p.SATURATION]="saturate",r[p.COLOR]="color",r[p.LUMINOSITY]="luminosity"):(r[p.NORMAL]="source-over",r[p.ADD]="lighter",r[p.MULTIPLY]="source-over",r[p.SCREEN]="source-over",r[p.OVERLAY]="source-over",r[p.DARKEN]="source-over",r[p.LIGHTEN]="source-over",r[p.COLOR_DODGE]="source-over",r[p.COLOR_BURN]="source-over",r[p.HARD_LIGHT]="source-over",r[p.SOFT_LIGHT]="source-over",r[p.DIFFERENCE]="source-over",r[p.EXCLUSION]="source-over",r[p.HUE]="source-over",r[p.SATURATION]="source-over",r[p.COLOR]="source-over",r[p.LUMINOSITY]="source-over"),r[p.NORMAL_NPM]=r[p.NORMAL],r[p.ADD_NPM]=r[p.ADD],r[p.SCREEN_NPM]=r[p.SCREEN],r[p.SRC_IN]="source-in",r[p.SRC_OUT]="source-out",r[p.SRC_ATOP]="source-atop",r[p.DST_OVER]="destination-over",r[p.DST_IN]="destination-in",r[p.DST_OUT]="destination-out",r[p.DST_ATOP]="destination-atop",r[p.XOR]="xor",r[p.SUBTRACT]="source-over",r),i._activeBlendMode=null,i._outerBlend=!1,i._projTransform=null,i.renderingToScreen=!1,l("Canvas"),i.resize(i.options.width,i.options.height),i}return function(t,e){function o(){this.constructor=t}m(t,e),t.prototype=null===e?Object.create(e):(o.prototype=e.prototype,new o)}(o,e),o.prototype.render=function(e,o,r,i,n){if(this.view){this.renderingToScreen=!o,this.emit("prerender");var l=this.resolution;o?((o=o.castToBaseTexture())._canvasRenderTarget||(o._canvasRenderTarget=new a(o.width,o.height,o.resolution),o.resource=new t(o._canvasRenderTarget.canvas),o.valid=!0),this.context=o._canvasRenderTarget.context,this.resolution=o._canvasRenderTarget.resolution):this.context=this.rootContext;var c=this.context;if(this._projTransform=i||null,o||(this._lastObjectRendered=e),!n){var d=e.enableTempParent();e.updateTransform(),e.disableTempParent(d)}if(c.save(),c.setTransform(1,0,0,1,0,0),c.globalAlpha=1,this._activeBlendMode=p.NORMAL,this._outerBlend=!1,c.globalCompositeOperation=this.blendModes[p.NORMAL],void 0!==r?r:this.clearBeforeRender)if(this.renderingToScreen)c.clearRect(0,0,this.width,this.height),this.backgroundAlpha>0&&(c.globalAlpha=this.contextAlpha?this.backgroundAlpha:1,c.fillStyle=this._backgroundColorString,c.fillRect(0,0,this.width,this.height),c.globalAlpha=1);else{(o=o)._canvasRenderTarget.clear();var u=o.clearColor;u[3]>0&&(c.globalAlpha=this.contextAlpha?u[3]:1,c.fillStyle=h(s(u)),c.fillRect(0,0,o.realWidth,o.realHeight),c.globalAlpha=1)}var g=this.context;this.context=c,e.renderCanvas(this),this.context=g,c.restore(),this.resolution=l,this._projTransform=null,this.emit("postrender")}},o.prototype.setContextTransform=function(t,e,o){var r=t,i=this._projTransform,n=this.resolution;o=o||n,i&&((r=_).copyFrom(t),r.prepend(i)),e?this.context.setTransform(r.a*o,r.b*o,r.c*o,r.d*o,r.tx*n|0,r.ty*n|0):this.context.setTransform(r.a*o,r.b*o,r.c*o,r.d*o,r.tx*n,r.ty*n)},o.prototype.clear=function(t,e){void 0===t&&(t=this._backgroundColorString),void 0===e&&(e=this.backgroundAlpha);var o=this.context;o.clearRect(0,0,this.width,this.height),t&&(o.globalAlpha=this.contextAlpha?e:1,o.fillStyle=t,o.fillRect(0,0,this.width,this.height),o.globalAlpha=1)},o.prototype.setBlendMode=function(t,e){var o=t===p.SRC_IN||t===p.SRC_OUT||t===p.DST_IN||t===p.DST_ATOP;!e&&o&&(t=p.NORMAL),this._activeBlendMode!==t&&(this._activeBlendMode=t,this._outerBlend=o,this.context.globalCompositeOperation=this.blendModes[t])},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,o){e.prototype.resize.call(this,t,o),this.smoothProperty&&(this.rootContext[this.smoothProperty]=f.SCALE_MODE===g.LINEAR)},o.prototype.invalidateBlendMode=function(){this._activeBlendMode=this.blendModes.indexOf(this.context.globalCompositeOperation)},o.registerPlugin=function(t,e){o.__plugins=o.__plugins||{},o.__plugins[t]=e},o}(e),b={canvas:null,getTintedCanvas:function(t,e){var o=t.texture,r="#"+("00000"+(0|(e=b.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=document.createElement("canvas");if(b.tintMethod(o,e,i),i.tintId=o._updateID,b.convertTintToImage){var a=new Image;a.src=i.toDataURL(),o.tintCache[r]=a}else o.tintCache[r]=i;return i},getTintedPattern:function(t,e){var o="#"+("00000"+(0|(e=b.roundColor(e))).toString(16)).substr(-6);t.patternCache=t.patternCache||{};var r=t.patternCache[o];return r&&r.tintId===t._updateID?r:(b.canvas||(b.canvas=document.createElement("canvas")),b.tintMethod(t,e,b.canvas),(r=b.canvas.getContext("2d").createPattern(b.canvas,"repeat")).tintId=t._updateID,t.patternCache[o]=r,r)},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,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.drawImage(t.baseTexture.getDrawableSource(),i.x,i.y,i.width,i.height,0,0,i.width,i.height),r.restore();for(var a=c(e),h=a[0],s=a[1],l=a[2],d=r.getImageData(0,0,i.width,i.height),u=d.data,p=0;p<u.length;p+=4)u[p+0]*=h,u[p+1]*=s,u[p+2]*=l;r.putImageData(d,0,0)},roundColor:function(t){var e=b.cacheStepsPerColorChannel,o=c(t);return o[0]=Math.min(255,o[0]/e*e),o[1]=Math.min(255,o[1]/e*e),o[2]=Math.min(255,o[2]/e*e),s(o)},cacheStepsPerColorChannel:8,convertTintToImage:!1,canUseMultiply:y(),tintMethod:null};b.tintMethod=b.canUseMultiply?b.tintWithMultiply:b.tintWithPerPixel;var S=o.create;o.create=function(t){if(!(t&&t.forceCanvas))try{return S(t)}catch(t){}return new x(t)},r.prototype.getDrawableSource=function(){var t=this.resource;return t?t.bitmap||t.source:null},i.prototype._canvasRenderTarget=null,n.prototype.patternCache=null,n.prototype.tintCache=null;export{x as CanvasRenderer,y as canUseNewCanvasBlendModes,b as canvasUtils};
 //# sourceMappingURL=canvas-renderer.min.js.map

index.d.ts

@@ -98,3 +98,3 @@ /// <reference path="./global.d.ts" />
      * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional
-     * @param {boolean} [options.transparent=false] - If the render view is transparent, default false
+     * @param {boolean} [options.contextAlpha=true] - Pass-through value for canvas' context `alpha` property.
      * @param {boolean} [options.autoDensity=false] - Resizes renderer view in CSS pixels to allow for
@@ -111,2 +111,3 @@ *   resolutions other than 1
      *  (shown if not transparent).
+     * @param {number} [options.backgroundAlpha=1] - Value from 0 (fully transparent) to 1 (fully opaque).
      */
@@ -138,4 +139,5 @@ constructor(options?: IRendererOptions);
      * @param {string} [clearColor] - Clear the canvas with this color, except the canvas is transparent.
+     * @param {number} [alpha] - Alpha to apply to the background fill color.
      */
-    clear(clearColor?: string): void;
+    clear(clearColor?: string, alpha?: number): void;
     /**
@@ -142,0 +144,0 @@ * Sets the blend mode of the renderer.

package.json

 {
   "name": "@pixi/canvas-renderer",
-  "version": "5.4.0-rc.3",
+  "version": "6.0.0-rc",
   "main": "dist/cjs/canvas-renderer.js",
@@ -28,14 +28,14 @@ "module": "dist/esm/canvas-renderer.js",
   "dependencies": {
-    "@pixi/constants": "5.4.0-rc.3",
-    "@pixi/core": "5.4.0-rc.3",
-    "@pixi/math": "5.4.0-rc.3",
-    "@pixi/settings": "5.4.0-rc.3",
-    "@pixi/utils": "5.4.0-rc.3"
+    "@pixi/constants": "6.0.0-rc",
+    "@pixi/core": "6.0.0-rc",
+    "@pixi/math": "6.0.0-rc",
+    "@pixi/settings": "6.0.0-rc",
+    "@pixi/utils": "6.0.0-rc"
   },
   "devDependencies": {
-    "@pixi/display": "5.4.0-rc.3",
-    "@pixi/graphics": "5.4.0-rc.3",
-    "@pixi/sprite": "5.4.0-rc.3"
+    "@pixi/display": "6.0.0-rc",
+    "@pixi/graphics": "6.0.0-rc",
+    "@pixi/sprite": "6.0.0-rc"
   },
-  "gitHead": "0c48db94f0521d85cc226fc4b15f69c30d53c765"
+  "gitHead": "15513755f4d9f2112df5cc261b44f2dc1f05e00c"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

601836

increased by1.16%

Lines of code

3231

increased by0.59%

Dependency changes

• + Added@pixi/constants@6.0.0-rc(transitive)

• + Added@pixi/core@6.0.0-rc(transitive)

• + Added@pixi/math@6.0.0-rc(transitive)

• + Added@pixi/runner@6.0.0-rc(transitive)

• + Added@pixi/settings@6.0.0-rc(transitive)

• + Added@pixi/ticker@6.0.0-rc(transitive)

• + Added@pixi/utils@6.0.0-rc(transitive)

• + Added@types/node@12.20.55(transitive)

• - Removed@pixi/constants@5.4.0-rc.3(transitive)

• - Removed@pixi/core@5.4.0-rc.3(transitive)

• - Removed@pixi/math@5.4.0-rc.3(transitive)

• - Removed@pixi/runner@5.4.0-rc.3(transitive)

• - Removed@pixi/settings@5.4.0-rc.3(transitive)

• - Removed@pixi/ticker@5.4.0-rc.3(transitive)

• - Removed@pixi/utils@5.4.0-rc.3(transitive)

• - Removedcss-color-names@1.0.1(transitive)

• Updated@pixi/constants@6.0.0-rc

• Updated@pixi/core@6.0.0-rc

• Updated@pixi/math@6.0.0-rc

• Updated@pixi/settings@6.0.0-rc

• Updated@pixi/utils@6.0.0-rc