@pixi/canvas-renderer - npm Package Compare versions

Comparing version 7.0.0-alpha.3 to 7.0.0-beta

dist/cjs/canvas-renderer.js

 /*!
- * @pixi/canvas-renderer - v7.0.0-alpha.3
- * Compiled Fri, 23 Sep 2022 14:33:14 UTC
+ * @pixi/canvas-renderer - v7.0.0-beta
+ * Compiled Tue, 11 Oct 2022 19:54:08 UTC
  *
@@ -609,3 +609,3 @@ * @pixi/canvas-renderer is licensed under the MIT License.
     canvas.tintId = texture._updateID;
-    if (canvasUtils.convertTintToImage) {
+    if (canvasUtils.convertTintToImage && canvas.toDataURL !== void 0) {
       const tintImage = new Image();
@@ -612,0 +612,0 @@ tintImage.src = canvas.toDataURL();

dist/cjs/canvas-renderer.min.js

 "use strict";/*!
- * @pixi/canvas-renderer - v7.0.0-alpha.3
- * Compiled Fri, 23 Sep 2022 14:33:14 UTC
+ * @pixi/canvas-renderer - v7.0.0-beta
+ * Compiled Tue, 11 Oct 2022 19:54:08 UTC
  *
  * @pixi/canvas-renderer is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license
- */Object.defineProperty(exports,"__esModule",{value:!0});var r=require("@pixi/core");const{deprecation:f}=r.utils,x=class extends r.SystemManager{constructor(e){super(),this.rendererLogId="Canvas",e=Object.assign({},r.settings.RENDER_OPTIONS,e);const o={runners:["init","destroy","contextChange","reset","update","postrender","prerender","resize"],systems:x.__systems,priority:["textureGenerator","background","_view","_plugin","startup","mask","canvasContext","objectRenderer"]};this.setup(o);const n={_plugin:x.__plugins,background:{alpha:e.backgroundAlpha,color:e.backgroundColor,clearBeforeRender:e.clearBeforeRender},_view:{height:e.height,width:e.width,autoDensity:e.autoDensity,resolution:e.resolution}};this.startup.run(n)}static test(){return!0}generateTexture(e,o){return this.textureGenerator.generateTexture(e,o)}reset(){}render(e,o){this.objectRenderer.render(e,o)}clear(){this.canvasContext.clear()}destroy(e){this.runners.destroy.items.reverse(),this.emitWithCustomOptions(this.runners.destroy,{_view:e}),super.destroy()}get plugins(){return this._plugin.plugins}resize(e,o){this._view.resizeView(e,o)}get width(){return this._view.element.width}get height(){return this._view.element.height}get resolution(){return this._view.resolution}get autoDensity(){return this._view.autoDensity}get view(){return this._view.element}get screen(){return this._view.screen}get lastObjectRendered(){return this.objectRenderer.lastObjectRendered}get renderingToScreen(){return this.objectRenderer.renderingToScreen}get clearBeforeRender(){return this.background.clearBeforeRender}get blendModes(){return this.canvasContext.blendModes}get maskManager(){return f("7.0.0","renderer.maskManager has been deprecated, please use renderer.mask instead"),this.mask}get refresh(){return!0}get rootContext(){return this.canvasContext.rootContext}get context(){return this.canvasContext.activeContext}get smoothProperty(){return this.canvasContext.smoothProperty}setBlendMode(e,o){this.canvasContext.setBlendMode(e,o)}invalidateBlendMode(){this.canvasContext.invalidateBlendMode()}setContextTransform(e,o,n){this.canvasContext.setContextTransform(e,o,n)}get backgroundColor(){return this.background.color}set backgroundColor(e){this.background.color=e}get backgroundAlpha(){return this.background.color}set backgroundAlpha(e){this.background.alpha=e}get preserveDrawingBuffer(){return!1}get useContextAlpha(){return!1}};let S=x;S.extension={type:r.ExtensionType.Renderer,priority:0},S.__plugins={},S.__systems={},r.extensions.handleByMap(r.ExtensionType.CanvasRendererPlugin,S.__plugins),r.extensions.handleByMap(r.ExtensionType.CanvasRendererSystem,S.__systems),r.extensions.add(S);class M{constructor(o){this._foundShapes=[],this.renderer=o}pushMask(o){const n=this.renderer,s=o.maskObject||o;n.canvasContext.activeContext.save();const t=this._foundShapes;if(this.recursiveFindShapes(s,t),t.length>0){const i=n.canvasContext.activeContext;i.beginPath();for(let u=0;u<t.length;u++){const c=t[u],a=c.transform.worldTransform;this.renderer.canvasContext.setContextTransform(a),this.renderGraphicsShape(c)}t.length=0,i.clip()}}recursiveFindShapes(o,n){o.geometry&&o.geometry.graphicsData&&n.push(o);const{children:s}=o;if(s)for(let t=0;t<s.length;t++)this.recursiveFindShapes(s[t],n)}renderGraphicsShape(o){o.finishPoly();const n=this.renderer.canvasContext.activeContext,s=o.geometry.graphicsData,t=s.length;if(t!==0)for(let i=0;i<t;i++){const u=s[i],c=u.shape;if(c.type===r.SHAPES.POLY){let a=c.points;const d=u.holes;let h,g,l,v;n.moveTo(a[0],a[1]);for(let E=1;E<a.length/2;E++)n.lineTo(a[E*2],a[E*2+1]);if(d.length>0){h=0,l=a[0],v=a[1];for(let E=2;E+2<a.length;E+=2)h+=(a[E]-l)*(a[E+3]-v)-(a[E+2]-l)*(a[E+1]-v);for(let E=0;E<d.length;E++)if(a=d[E].shape.points,!!a){g=0,l=a[0],v=a[1];for(let p=2;p+2<a.length;p+=2)g+=(a[p]-l)*(a[p+3]-v)-(a[p+2]-l)*(a[p+1]-v);if(g*h<0){n.moveTo(a[0],a[1]);for(let p=2;p<a.length;p+=2)n.lineTo(a[p],a[p+1])}else{n.moveTo(a[a.length-2],a[a.length-1]);for(let p=a.length-4;p>=0;p-=2)n.lineTo(a[p],a[p+1])}d[E].shape.closeStroke&&n.closePath()}}a[0]===a[a.length-2]&&a[1]===a[a.length-1]&&n.closePath()}else if(c.type===r.SHAPES.RECT)n.rect(c.x,c.y,c.width,c.height),n.closePath();else if(c.type===r.SHAPES.CIRC)n.arc(c.x,c.y,c.radius,0,2*Math.PI),n.closePath();else if(c.type===r.SHAPES.ELIP){const a=c.width*2,d=c.height*2,h=c.x-a/2,g=c.y-d/2,l=.5522848,v=a/2*l,E=d/2*l,p=h+a,m=g+d,_=h+a/2,C=g+d/2;n.moveTo(h,C),n.bezierCurveTo(h,C-E,_-v,g,_,g),n.bezierCurveTo(_+v,g,p,C-E,p,C),n.bezierCurveTo(p,C+E,_+v,m,_,m),n.bezierCurveTo(_-v,m,h,C+E,h,C),n.closePath()}else if(c.type===r.SHAPES.RREC){const a=c.x,d=c.y,h=c.width,g=c.height;let l=c.radius;const v=Math.min(h,g)/2;l=l>v?v:l,n.moveTo(a,d+l),n.lineTo(a,d+g-l),n.quadraticCurveTo(a,d+g,a+l,d+g),n.lineTo(a+h-l,d+g),n.quadraticCurveTo(a+h,d+g,a+h,d+g-l),n.lineTo(a+h,d+l),n.quadraticCurveTo(a+h,d,a+h-l,d),n.lineTo(a+l,d),n.quadraticCurveTo(a,d,a,d+l),n.closePath()}}}popMask(o){o.canvasContext.activeContext.restore(),o.canvasContext.invalidateBlendMode()}destroy(){}}M.extension={type:r.ExtensionType.CanvasRendererSystem,name:"mask"},r.extensions.add(M);class O{constructor(o){this.renderer=o}render(o,n){const s=this.renderer;if(!s.view)return;const t=s.canvasContext;let i,u,c,a;n&&(i=n.renderTexture,u=n.clear,c=n.transform,a=n.skipUpdateTransform),this.renderingToScreen=!i,s.emit("prerender");const d=s.resolution;i?(i=i.castToBaseTexture(),i._canvasRenderTarget||(i._canvasRenderTarget=new r.utils.CanvasRenderTarget(i.width,i.height,i.resolution),i.resource=new r.CanvasResource(i._canvasRenderTarget.canvas),i.valid=!0),t.activeContext=i._canvasRenderTarget.context,s.canvasContext.activeResolution=i._canvasRenderTarget.resolution):(t.activeContext=t.rootContext,t.activeResolution=d);const h=t.activeContext;if(t._projTransform=c||null,i||(this.lastObjectRendered=o),!a){const l=o.enableTempParent();o.updateTransform(),o.disableTempParent(l)}if(h.save(),h.setTransform(1,0,0,1,0,0),h.globalAlpha=1,t._activeBlendMode=r.BLEND_MODES.NORMAL,t._outerBlend=!1,h.globalCompositeOperation=t.blendModes[r.BLEND_MODES.NORMAL],u??s.background.clearBeforeRender)if(this.renderingToScreen){h.clearRect(0,0,s.width,s.height);const l=s.background;l.alpha>0&&(h.globalAlpha=l.alpha,h.fillStyle=l.colorString,h.fillRect(0,0,s.width,s.height),h.globalAlpha=1)}else{i=i,i._canvasRenderTarget.clear();const l=i.clearColor;l[3]>0&&(h.globalAlpha=l[3]??1,h.fillStyle=r.utils.hex2string(r.utils.rgb2hex(l)),h.fillRect(0,0,i.realWidth,i.realHeight),h.globalAlpha=1)}const g=t.activeContext;t.activeContext=h,o.renderCanvas(s),t.activeContext=g,h.restore(),t.activeResolution=d,t._projTransform=null,s.emit("postrender")}destroy(){this.lastObjectRendered=null,this.render=null}}O.extension={type:r.ExtensionType.CanvasRendererSystem,name:"objectRenderer"},r.extensions.add(O);function R(e){const o=r.settings.ADAPTER.createCanvas(6,1),n=o.getContext("2d");return n.fillStyle=e,n.fillRect(0,0,6,1),o}function T(){if(typeof document>"u")return!1;const e=R("#ff00ff"),o=R("#ffff00"),n=r.settings.ADAPTER.createCanvas(6,1).getContext("2d");n.globalCompositeOperation="multiply",n.drawImage(e,0,0),n.drawImage(o,2,0);const s=n.getImageData(2,0,1,1);if(!s)return!1;const t=s.data;return t[0]===255&&t[1]===0&&t[2]===0}function N(e=[]){return T()?(e[r.BLEND_MODES.NORMAL]="source-over",e[r.BLEND_MODES.ADD]="lighter",e[r.BLEND_MODES.MULTIPLY]="multiply",e[r.BLEND_MODES.SCREEN]="screen",e[r.BLEND_MODES.OVERLAY]="overlay",e[r.BLEND_MODES.DARKEN]="darken",e[r.BLEND_MODES.LIGHTEN]="lighten",e[r.BLEND_MODES.COLOR_DODGE]="color-dodge",e[r.BLEND_MODES.COLOR_BURN]="color-burn",e[r.BLEND_MODES.HARD_LIGHT]="hard-light",e[r.BLEND_MODES.SOFT_LIGHT]="soft-light",e[r.BLEND_MODES.DIFFERENCE]="difference",e[r.BLEND_MODES.EXCLUSION]="exclusion",e[r.BLEND_MODES.HUE]="hue",e[r.BLEND_MODES.SATURATION]="saturation",e[r.BLEND_MODES.COLOR]="color",e[r.BLEND_MODES.LUMINOSITY]="luminosity"):(e[r.BLEND_MODES.NORMAL]="source-over",e[r.BLEND_MODES.ADD]="lighter",e[r.BLEND_MODES.MULTIPLY]="source-over",e[r.BLEND_MODES.SCREEN]="source-over",e[r.BLEND_MODES.OVERLAY]="source-over",e[r.BLEND_MODES.DARKEN]="source-over",e[r.BLEND_MODES.LIGHTEN]="source-over",e[r.BLEND_MODES.COLOR_DODGE]="source-over",e[r.BLEND_MODES.COLOR_BURN]="source-over",e[r.BLEND_MODES.HARD_LIGHT]="source-over",e[r.BLEND_MODES.SOFT_LIGHT]="source-over",e[r.BLEND_MODES.DIFFERENCE]="source-over",e[r.BLEND_MODES.EXCLUSION]="source-over",e[r.BLEND_MODES.HUE]="source-over",e[r.BLEND_MODES.SATURATION]="source-over",e[r.BLEND_MODES.COLOR]="source-over",e[r.BLEND_MODES.LUMINOSITY]="source-over"),e[r.BLEND_MODES.NORMAL_NPM]=e[r.BLEND_MODES.NORMAL],e[r.BLEND_MODES.ADD_NPM]=e[r.BLEND_MODES.ADD],e[r.BLEND_MODES.SCREEN_NPM]=e[r.BLEND_MODES.SCREEN],e[r.BLEND_MODES.SRC_IN]="source-in",e[r.BLEND_MODES.SRC_OUT]="source-out",e[r.BLEND_MODES.SRC_ATOP]="source-atop",e[r.BLEND_MODES.DST_OVER]="destination-over",e[r.BLEND_MODES.DST_IN]="destination-in",e[r.BLEND_MODES.DST_OUT]="destination-out",e[r.BLEND_MODES.DST_ATOP]="destination-atop",e[r.BLEND_MODES.XOR]="xor",e[r.BLEND_MODES.SUBTRACT]="source-over",e}const b=new r.Matrix;class y{constructor(o){this.activeResolution=1,this.smoothProperty="imageSmoothingEnabled",this.blendModes=N(),this._activeBlendMode=null,this._projTransform=null,this._outerBlend=!1,this.renderer=o}init(){const o=this.renderer.background.alpha<1;if(this.rootContext=this.renderer.view.getContext("2d",{alpha:o}),this.activeContext=this.rootContext,!this.rootContext.imageSmoothingEnabled){const n=this.rootContext;n.webkitImageSmoothingEnabled?this.smoothProperty="webkitImageSmoothingEnabled":n.mozImageSmoothingEnabled?this.smoothProperty="mozImageSmoothingEnabled":n.oImageSmoothingEnabled?this.smoothProperty="oImageSmoothingEnabled":n.msImageSmoothingEnabled&&(this.smoothProperty="msImageSmoothingEnabled")}}setContextTransform(o,n,s){let t=o;const i=this._projTransform,u=this.activeResolution;s=s||u,i&&(t=b,t.copyFrom(o),t.prepend(i)),n?this.activeContext.setTransform(t.a*s,t.b*s,t.c*s,t.d*s,t.tx*u|0,t.ty*u|0):this.activeContext.setTransform(t.a*s,t.b*s,t.c*s,t.d*s,t.tx*u,t.ty*u)}clear(o,n){const{activeContext:s,renderer:t}=this;o=o??this.renderer.background.colorString,s.clearRect(0,0,t.width,t.height),o&&(s.globalAlpha=n??this.renderer.background.alpha,s.fillStyle=o,s.fillRect(0,0,t.width,t.height),s.globalAlpha=1)}setBlendMode(o,n){const s=o===r.BLEND_MODES.SRC_IN||o===r.BLEND_MODES.SRC_OUT||o===r.BLEND_MODES.DST_IN||o===r.BLEND_MODES.DST_ATOP;!n&&s&&(o=r.BLEND_MODES.NORMAL),this._activeBlendMode!==o&&(this._activeBlendMode=o,this._outerBlend=s,this.activeContext.globalCompositeOperation=this.blendModes[o])}resize(){this.smoothProperty&&(this.rootContext[this.smoothProperty]=r.settings.SCALE_MODE===r.SCALE_MODES.LINEAR)}invalidateBlendMode(){this._activeBlendMode=this.blendModes.indexOf(this.activeContext.globalCompositeOperation)}destroy(){this.renderer=null,this.rootContext=null,this.activeContext=null,this.smoothProperty=null}}y.extension={type:r.ExtensionType.CanvasRendererSystem,name:"canvasContext"},r.extensions.add(y);const D={canvas:null,getTintedCanvas:(e,o)=>{const n=e.texture;o=D.roundColor(o);const s=`#${`00000${(o|0).toString(16)}`.slice(-6)}`;n.tintCache=n.tintCache||{};const t=n.tintCache[s];let i;if(t){if(t.tintId===n._updateID)return n.tintCache[s];i=n.tintCache[s]}else i=r.settings.ADAPTER.createCanvas();if(D.tintMethod(n,o,i),i.tintId=n._updateID,D.convertTintToImage){const u=new Image;u.src=i.toDataURL(),n.tintCache[s]=u}else n.tintCache[s]=i;return i},getTintedPattern:(e,o)=>{o=D.roundColor(o);const n=`#${`00000${(o|0).toString(16)}`.slice(-6)}`;e.patternCache=e.patternCache||{};let s=e.patternCache[n];return s&&s.tintId===e._updateID||(D.canvas||(D.canvas=r.settings.ADAPTER.createCanvas()),D.tintMethod(e,o,D.canvas),s=D.canvas.getContext("2d").createPattern(D.canvas,"repeat"),s.tintId=e._updateID,e.patternCache[n]=s),s},tintWithMultiply:(e,o,n)=>{const s=n.getContext("2d"),t=e._frame.clone(),i=e.baseTexture.resolution;t.x*=i,t.y*=i,t.width*=i,t.height*=i,n.width=Math.ceil(t.width),n.height=Math.ceil(t.height),s.save(),s.fillStyle=`#${`00000${(o|0).toString(16)}`.slice(-6)}`,s.fillRect(0,0,t.width,t.height),s.globalCompositeOperation="multiply";const u=e.baseTexture.getDrawableSource();s.drawImage(u,t.x,t.y,t.width,t.height,0,0,t.width,t.height),s.globalCompositeOperation="destination-atop",s.drawImage(u,t.x,t.y,t.width,t.height,0,0,t.width,t.height),s.restore()},tintWithOverlay:(e,o,n)=>{const s=n.getContext("2d"),t=e._frame.clone(),i=e.baseTexture.resolution;t.x*=i,t.y*=i,t.width*=i,t.height*=i,n.width=Math.ceil(t.width),n.height=Math.ceil(t.height),s.save(),s.globalCompositeOperation="copy",s.fillStyle=`#${`00000${(o|0).toString(16)}`.slice(-6)}`,s.fillRect(0,0,t.width,t.height),s.globalCompositeOperation="destination-atop",s.drawImage(e.baseTexture.getDrawableSource(),t.x,t.y,t.width,t.height,0,0,t.width,t.height),s.restore()},tintWithPerPixel:(e,o,n)=>{const s=n.getContext("2d"),t=e._frame.clone(),i=e.baseTexture.resolution;t.x*=i,t.y*=i,t.width*=i,t.height*=i,n.width=Math.ceil(t.width),n.height=Math.ceil(t.height),s.save(),s.globalCompositeOperation="copy",s.drawImage(e.baseTexture.getDrawableSource(),t.x,t.y,t.width,t.height,0,0,t.width,t.height),s.restore();const u=r.utils.hex2rgb(o),c=u[0],a=u[1],d=u[2],h=s.getImageData(0,0,t.width,t.height),g=h.data;for(let l=0;l<g.length;l+=4)g[l+0]*=c,g[l+1]*=a,g[l+2]*=d;s.putImageData(h,0,0)},roundColor:e=>{const o=D.cacheStepsPerColorChannel,n=r.utils.hex2rgb(e);return n[0]=Math.min(255,n[0]/o*o),n[1]=Math.min(255,n[1]/o*o),n[2]=Math.min(255,n[2]/o*o),r.utils.rgb2hex(n)},cacheStepsPerColorChannel:8,convertTintToImage:!1,canUseMultiply:T(),tintMethod:null};D.tintMethod=D.canUseMultiply?D.tintWithMultiply:D.tintWithPerPixel,r.BaseTexture.prototype.getDrawableSource=function(){const e=this.resource;return e?e.bitmap||e.source:null},r.BaseRenderTexture.prototype._canvasRenderTarget=null,r.Texture.prototype.patternCache=null,r.Texture.prototype.tintCache=null,exports.CanvasContextSystem=y,exports.CanvasMaskSystem=M,exports.CanvasObjectRendererSystem=O,exports.CanvasRenderer=S,exports.canUseNewCanvasBlendModes=T,exports.canvasUtils=D;
+ */Object.defineProperty(exports,"__esModule",{value:!0});var r=require("@pixi/core");const{deprecation:f}=r.utils,x=class extends r.SystemManager{constructor(e){super(),this.rendererLogId="Canvas",e=Object.assign({},r.settings.RENDER_OPTIONS,e);const s={runners:["init","destroy","contextChange","reset","update","postrender","prerender","resize"],systems:x.__systems,priority:["textureGenerator","background","_view","_plugin","startup","mask","canvasContext","objectRenderer"]};this.setup(s);const n={_plugin:x.__plugins,background:{alpha:e.backgroundAlpha,color:e.backgroundColor,clearBeforeRender:e.clearBeforeRender},_view:{height:e.height,width:e.width,autoDensity:e.autoDensity,resolution:e.resolution}};this.startup.run(n)}static test(){return!0}generateTexture(e,s){return this.textureGenerator.generateTexture(e,s)}reset(){}render(e,s){this.objectRenderer.render(e,s)}clear(){this.canvasContext.clear()}destroy(e){this.runners.destroy.items.reverse(),this.emitWithCustomOptions(this.runners.destroy,{_view:e}),super.destroy()}get plugins(){return this._plugin.plugins}resize(e,s){this._view.resizeView(e,s)}get width(){return this._view.element.width}get height(){return this._view.element.height}get resolution(){return this._view.resolution}get autoDensity(){return this._view.autoDensity}get view(){return this._view.element}get screen(){return this._view.screen}get lastObjectRendered(){return this.objectRenderer.lastObjectRendered}get renderingToScreen(){return this.objectRenderer.renderingToScreen}get clearBeforeRender(){return this.background.clearBeforeRender}get blendModes(){return this.canvasContext.blendModes}get maskManager(){return f("7.0.0","renderer.maskManager has been deprecated, please use renderer.mask instead"),this.mask}get refresh(){return!0}get rootContext(){return this.canvasContext.rootContext}get context(){return this.canvasContext.activeContext}get smoothProperty(){return this.canvasContext.smoothProperty}setBlendMode(e,s){this.canvasContext.setBlendMode(e,s)}invalidateBlendMode(){this.canvasContext.invalidateBlendMode()}setContextTransform(e,s,n){this.canvasContext.setContextTransform(e,s,n)}get backgroundColor(){return this.background.color}set backgroundColor(e){this.background.color=e}get backgroundAlpha(){return this.background.color}set backgroundAlpha(e){this.background.alpha=e}get preserveDrawingBuffer(){return!1}get useContextAlpha(){return!1}};let S=x;S.extension={type:r.ExtensionType.Renderer,priority:0},S.__plugins={},S.__systems={},r.extensions.handleByMap(r.ExtensionType.CanvasRendererPlugin,S.__plugins),r.extensions.handleByMap(r.ExtensionType.CanvasRendererSystem,S.__systems),r.extensions.add(S);class M{constructor(s){this._foundShapes=[],this.renderer=s}pushMask(s){const n=this.renderer,o=s.maskObject||s;n.canvasContext.activeContext.save();const t=this._foundShapes;if(this.recursiveFindShapes(o,t),t.length>0){const i=n.canvasContext.activeContext;i.beginPath();for(let u=0;u<t.length;u++){const c=t[u],a=c.transform.worldTransform;this.renderer.canvasContext.setContextTransform(a),this.renderGraphicsShape(c)}t.length=0,i.clip()}}recursiveFindShapes(s,n){s.geometry&&s.geometry.graphicsData&&n.push(s);const{children:o}=s;if(o)for(let t=0;t<o.length;t++)this.recursiveFindShapes(o[t],n)}renderGraphicsShape(s){s.finishPoly();const n=this.renderer.canvasContext.activeContext,o=s.geometry.graphicsData,t=o.length;if(t!==0)for(let i=0;i<t;i++){const u=o[i],c=u.shape;if(c.type===r.SHAPES.POLY){let a=c.points;const d=u.holes;let h,g,l,v;n.moveTo(a[0],a[1]);for(let E=1;E<a.length/2;E++)n.lineTo(a[E*2],a[E*2+1]);if(d.length>0){h=0,l=a[0],v=a[1];for(let E=2;E+2<a.length;E+=2)h+=(a[E]-l)*(a[E+3]-v)-(a[E+2]-l)*(a[E+1]-v);for(let E=0;E<d.length;E++)if(a=d[E].shape.points,!!a){g=0,l=a[0],v=a[1];for(let p=2;p+2<a.length;p+=2)g+=(a[p]-l)*(a[p+3]-v)-(a[p+2]-l)*(a[p+1]-v);if(g*h<0){n.moveTo(a[0],a[1]);for(let p=2;p<a.length;p+=2)n.lineTo(a[p],a[p+1])}else{n.moveTo(a[a.length-2],a[a.length-1]);for(let p=a.length-4;p>=0;p-=2)n.lineTo(a[p],a[p+1])}d[E].shape.closeStroke&&n.closePath()}}a[0]===a[a.length-2]&&a[1]===a[a.length-1]&&n.closePath()}else if(c.type===r.SHAPES.RECT)n.rect(c.x,c.y,c.width,c.height),n.closePath();else if(c.type===r.SHAPES.CIRC)n.arc(c.x,c.y,c.radius,0,2*Math.PI),n.closePath();else if(c.type===r.SHAPES.ELIP){const a=c.width*2,d=c.height*2,h=c.x-a/2,g=c.y-d/2,l=.5522848,v=a/2*l,E=d/2*l,p=h+a,m=g+d,_=h+a/2,C=g+d/2;n.moveTo(h,C),n.bezierCurveTo(h,C-E,_-v,g,_,g),n.bezierCurveTo(_+v,g,p,C-E,p,C),n.bezierCurveTo(p,C+E,_+v,m,_,m),n.bezierCurveTo(_-v,m,h,C+E,h,C),n.closePath()}else if(c.type===r.SHAPES.RREC){const a=c.x,d=c.y,h=c.width,g=c.height;let l=c.radius;const v=Math.min(h,g)/2;l=l>v?v:l,n.moveTo(a,d+l),n.lineTo(a,d+g-l),n.quadraticCurveTo(a,d+g,a+l,d+g),n.lineTo(a+h-l,d+g),n.quadraticCurveTo(a+h,d+g,a+h,d+g-l),n.lineTo(a+h,d+l),n.quadraticCurveTo(a+h,d,a+h-l,d),n.lineTo(a+l,d),n.quadraticCurveTo(a,d,a,d+l),n.closePath()}}}popMask(s){s.canvasContext.activeContext.restore(),s.canvasContext.invalidateBlendMode()}destroy(){}}M.extension={type:r.ExtensionType.CanvasRendererSystem,name:"mask"},r.extensions.add(M);class O{constructor(s){this.renderer=s}render(s,n){const o=this.renderer;if(!o.view)return;const t=o.canvasContext;let i,u,c,a;n&&(i=n.renderTexture,u=n.clear,c=n.transform,a=n.skipUpdateTransform),this.renderingToScreen=!i,o.emit("prerender");const d=o.resolution;i?(i=i.castToBaseTexture(),i._canvasRenderTarget||(i._canvasRenderTarget=new r.utils.CanvasRenderTarget(i.width,i.height,i.resolution),i.resource=new r.CanvasResource(i._canvasRenderTarget.canvas),i.valid=!0),t.activeContext=i._canvasRenderTarget.context,o.canvasContext.activeResolution=i._canvasRenderTarget.resolution):(t.activeContext=t.rootContext,t.activeResolution=d);const h=t.activeContext;if(t._projTransform=c||null,i||(this.lastObjectRendered=s),!a){const l=s.enableTempParent();s.updateTransform(),s.disableTempParent(l)}if(h.save(),h.setTransform(1,0,0,1,0,0),h.globalAlpha=1,t._activeBlendMode=r.BLEND_MODES.NORMAL,t._outerBlend=!1,h.globalCompositeOperation=t.blendModes[r.BLEND_MODES.NORMAL],u??o.background.clearBeforeRender)if(this.renderingToScreen){h.clearRect(0,0,o.width,o.height);const l=o.background;l.alpha>0&&(h.globalAlpha=l.alpha,h.fillStyle=l.colorString,h.fillRect(0,0,o.width,o.height),h.globalAlpha=1)}else{i=i,i._canvasRenderTarget.clear();const l=i.clearColor;l[3]>0&&(h.globalAlpha=l[3]??1,h.fillStyle=r.utils.hex2string(r.utils.rgb2hex(l)),h.fillRect(0,0,i.realWidth,i.realHeight),h.globalAlpha=1)}const g=t.activeContext;t.activeContext=h,s.renderCanvas(o),t.activeContext=g,h.restore(),t.activeResolution=d,t._projTransform=null,o.emit("postrender")}destroy(){this.lastObjectRendered=null,this.render=null}}O.extension={type:r.ExtensionType.CanvasRendererSystem,name:"objectRenderer"},r.extensions.add(O);function R(e){const s=r.settings.ADAPTER.createCanvas(6,1),n=s.getContext("2d");return n.fillStyle=e,n.fillRect(0,0,6,1),s}function T(){if(typeof document>"u")return!1;const e=R("#ff00ff"),s=R("#ffff00"),n=r.settings.ADAPTER.createCanvas(6,1).getContext("2d");n.globalCompositeOperation="multiply",n.drawImage(e,0,0),n.drawImage(s,2,0);const o=n.getImageData(2,0,1,1);if(!o)return!1;const t=o.data;return t[0]===255&&t[1]===0&&t[2]===0}function L(e=[]){return T()?(e[r.BLEND_MODES.NORMAL]="source-over",e[r.BLEND_MODES.ADD]="lighter",e[r.BLEND_MODES.MULTIPLY]="multiply",e[r.BLEND_MODES.SCREEN]="screen",e[r.BLEND_MODES.OVERLAY]="overlay",e[r.BLEND_MODES.DARKEN]="darken",e[r.BLEND_MODES.LIGHTEN]="lighten",e[r.BLEND_MODES.COLOR_DODGE]="color-dodge",e[r.BLEND_MODES.COLOR_BURN]="color-burn",e[r.BLEND_MODES.HARD_LIGHT]="hard-light",e[r.BLEND_MODES.SOFT_LIGHT]="soft-light",e[r.BLEND_MODES.DIFFERENCE]="difference",e[r.BLEND_MODES.EXCLUSION]="exclusion",e[r.BLEND_MODES.HUE]="hue",e[r.BLEND_MODES.SATURATION]="saturation",e[r.BLEND_MODES.COLOR]="color",e[r.BLEND_MODES.LUMINOSITY]="luminosity"):(e[r.BLEND_MODES.NORMAL]="source-over",e[r.BLEND_MODES.ADD]="lighter",e[r.BLEND_MODES.MULTIPLY]="source-over",e[r.BLEND_MODES.SCREEN]="source-over",e[r.BLEND_MODES.OVERLAY]="source-over",e[r.BLEND_MODES.DARKEN]="source-over",e[r.BLEND_MODES.LIGHTEN]="source-over",e[r.BLEND_MODES.COLOR_DODGE]="source-over",e[r.BLEND_MODES.COLOR_BURN]="source-over",e[r.BLEND_MODES.HARD_LIGHT]="source-over",e[r.BLEND_MODES.SOFT_LIGHT]="source-over",e[r.BLEND_MODES.DIFFERENCE]="source-over",e[r.BLEND_MODES.EXCLUSION]="source-over",e[r.BLEND_MODES.HUE]="source-over",e[r.BLEND_MODES.SATURATION]="source-over",e[r.BLEND_MODES.COLOR]="source-over",e[r.BLEND_MODES.LUMINOSITY]="source-over"),e[r.BLEND_MODES.NORMAL_NPM]=e[r.BLEND_MODES.NORMAL],e[r.BLEND_MODES.ADD_NPM]=e[r.BLEND_MODES.ADD],e[r.BLEND_MODES.SCREEN_NPM]=e[r.BLEND_MODES.SCREEN],e[r.BLEND_MODES.SRC_IN]="source-in",e[r.BLEND_MODES.SRC_OUT]="source-out",e[r.BLEND_MODES.SRC_ATOP]="source-atop",e[r.BLEND_MODES.DST_OVER]="destination-over",e[r.BLEND_MODES.DST_IN]="destination-in",e[r.BLEND_MODES.DST_OUT]="destination-out",e[r.BLEND_MODES.DST_ATOP]="destination-atop",e[r.BLEND_MODES.XOR]="xor",e[r.BLEND_MODES.SUBTRACT]="source-over",e}const N=new r.Matrix;class y{constructor(s){this.activeResolution=1,this.smoothProperty="imageSmoothingEnabled",this.blendModes=L(),this._activeBlendMode=null,this._projTransform=null,this._outerBlend=!1,this.renderer=s}init(){const s=this.renderer.background.alpha<1;if(this.rootContext=this.renderer.view.getContext("2d",{alpha:s}),this.activeContext=this.rootContext,!this.rootContext.imageSmoothingEnabled){const n=this.rootContext;n.webkitImageSmoothingEnabled?this.smoothProperty="webkitImageSmoothingEnabled":n.mozImageSmoothingEnabled?this.smoothProperty="mozImageSmoothingEnabled":n.oImageSmoothingEnabled?this.smoothProperty="oImageSmoothingEnabled":n.msImageSmoothingEnabled&&(this.smoothProperty="msImageSmoothingEnabled")}}setContextTransform(s,n,o){let t=s;const i=this._projTransform,u=this.activeResolution;o=o||u,i&&(t=N,t.copyFrom(s),t.prepend(i)),n?this.activeContext.setTransform(t.a*o,t.b*o,t.c*o,t.d*o,t.tx*u|0,t.ty*u|0):this.activeContext.setTransform(t.a*o,t.b*o,t.c*o,t.d*o,t.tx*u,t.ty*u)}clear(s,n){const{activeContext:o,renderer:t}=this;s=s??this.renderer.background.colorString,o.clearRect(0,0,t.width,t.height),s&&(o.globalAlpha=n??this.renderer.background.alpha,o.fillStyle=s,o.fillRect(0,0,t.width,t.height),o.globalAlpha=1)}setBlendMode(s,n){const o=s===r.BLEND_MODES.SRC_IN||s===r.BLEND_MODES.SRC_OUT||s===r.BLEND_MODES.DST_IN||s===r.BLEND_MODES.DST_ATOP;!n&&o&&(s=r.BLEND_MODES.NORMAL),this._activeBlendMode!==s&&(this._activeBlendMode=s,this._outerBlend=o,this.activeContext.globalCompositeOperation=this.blendModes[s])}resize(){this.smoothProperty&&(this.rootContext[this.smoothProperty]=r.settings.SCALE_MODE===r.SCALE_MODES.LINEAR)}invalidateBlendMode(){this._activeBlendMode=this.blendModes.indexOf(this.activeContext.globalCompositeOperation)}destroy(){this.renderer=null,this.rootContext=null,this.activeContext=null,this.smoothProperty=null}}y.extension={type:r.ExtensionType.CanvasRendererSystem,name:"canvasContext"},r.extensions.add(y);const D={canvas:null,getTintedCanvas:(e,s)=>{const n=e.texture;s=D.roundColor(s);const o=`#${`00000${(s|0).toString(16)}`.slice(-6)}`;n.tintCache=n.tintCache||{};const t=n.tintCache[o];let i;if(t){if(t.tintId===n._updateID)return n.tintCache[o];i=n.tintCache[o]}else i=r.settings.ADAPTER.createCanvas();if(D.tintMethod(n,s,i),i.tintId=n._updateID,D.convertTintToImage&&i.toDataURL!==void 0){const u=new Image;u.src=i.toDataURL(),n.tintCache[o]=u}else n.tintCache[o]=i;return i},getTintedPattern:(e,s)=>{s=D.roundColor(s);const n=`#${`00000${(s|0).toString(16)}`.slice(-6)}`;e.patternCache=e.patternCache||{};let o=e.patternCache[n];return o&&o.tintId===e._updateID||(D.canvas||(D.canvas=r.settings.ADAPTER.createCanvas()),D.tintMethod(e,s,D.canvas),o=D.canvas.getContext("2d").createPattern(D.canvas,"repeat"),o.tintId=e._updateID,e.patternCache[n]=o),o},tintWithMultiply:(e,s,n)=>{const o=n.getContext("2d"),t=e._frame.clone(),i=e.baseTexture.resolution;t.x*=i,t.y*=i,t.width*=i,t.height*=i,n.width=Math.ceil(t.width),n.height=Math.ceil(t.height),o.save(),o.fillStyle=`#${`00000${(s|0).toString(16)}`.slice(-6)}`,o.fillRect(0,0,t.width,t.height),o.globalCompositeOperation="multiply";const u=e.baseTexture.getDrawableSource();o.drawImage(u,t.x,t.y,t.width,t.height,0,0,t.width,t.height),o.globalCompositeOperation="destination-atop",o.drawImage(u,t.x,t.y,t.width,t.height,0,0,t.width,t.height),o.restore()},tintWithOverlay:(e,s,n)=>{const o=n.getContext("2d"),t=e._frame.clone(),i=e.baseTexture.resolution;t.x*=i,t.y*=i,t.width*=i,t.height*=i,n.width=Math.ceil(t.width),n.height=Math.ceil(t.height),o.save(),o.globalCompositeOperation="copy",o.fillStyle=`#${`00000${(s|0).toString(16)}`.slice(-6)}`,o.fillRect(0,0,t.width,t.height),o.globalCompositeOperation="destination-atop",o.drawImage(e.baseTexture.getDrawableSource(),t.x,t.y,t.width,t.height,0,0,t.width,t.height),o.restore()},tintWithPerPixel:(e,s,n)=>{const o=n.getContext("2d"),t=e._frame.clone(),i=e.baseTexture.resolution;t.x*=i,t.y*=i,t.width*=i,t.height*=i,n.width=Math.ceil(t.width),n.height=Math.ceil(t.height),o.save(),o.globalCompositeOperation="copy",o.drawImage(e.baseTexture.getDrawableSource(),t.x,t.y,t.width,t.height,0,0,t.width,t.height),o.restore();const u=r.utils.hex2rgb(s),c=u[0],a=u[1],d=u[2],h=o.getImageData(0,0,t.width,t.height),g=h.data;for(let l=0;l<g.length;l+=4)g[l+0]*=c,g[l+1]*=a,g[l+2]*=d;o.putImageData(h,0,0)},roundColor:e=>{const s=D.cacheStepsPerColorChannel,n=r.utils.hex2rgb(e);return n[0]=Math.min(255,n[0]/s*s),n[1]=Math.min(255,n[1]/s*s),n[2]=Math.min(255,n[2]/s*s),r.utils.rgb2hex(n)},cacheStepsPerColorChannel:8,convertTintToImage:!1,canUseMultiply:T(),tintMethod:null};D.tintMethod=D.canUseMultiply?D.tintWithMultiply:D.tintWithPerPixel,r.BaseTexture.prototype.getDrawableSource=function(){const e=this.resource;return e?e.bitmap||e.source:null},r.BaseRenderTexture.prototype._canvasRenderTarget=null,r.Texture.prototype.patternCache=null,r.Texture.prototype.tintCache=null,exports.CanvasContextSystem=y,exports.CanvasMaskSystem=M,exports.CanvasObjectRendererSystem=O,exports.CanvasRenderer=S,exports.canUseNewCanvasBlendModes=T,exports.canvasUtils=D;
 //# sourceMappingURL=canvas-renderer.min.js.map

global.d.ts

@@ -11,3 +11,3 @@ declare namespace GlobalMixins
         patternCache?: { [key: string]: CanvasPattern };
-        tintCache?: { [key: string]: HTMLCanvasElement | HTMLImageElement };
+        tintCache?: { [key: string]: import('@pixi/settings').ICanvas | HTMLImageElement };
     }
@@ -25,2 +25,8 @@
 
+    // eslint-disable-next-line @typescript-eslint/no-empty-interface
+    interface ICanvas extends GlobalTintable
+    {
+
+    }
+
     interface IRendererOptions
@@ -50,8 +56,2 @@ {
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
-declare interface HTMLCanvasElement extends GlobalMixins.GlobalTintable
-{
-
-}
-
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
 declare interface HTMLImageElement extends GlobalMixins.GlobalTintable
@@ -58,0 +58,0 @@ {

index.d.ts

@@ -10,2 +10,4 @@ /// <reference path="./global.d.ts" />
 import type { Graphics } from '@pixi/graphics';
+import type { ICanvas } from '@pixi/settings';
+import type { ICanvasRenderingContext2D } from '@pixi/settings';
 import type { IGenerateTextureOptions } from '@pixi/core';
@@ -263,3 +265,3 @@ import type { IRenderableObject } from '@pixi/core';
      * @param {number} [options.height=600] - the height of the screen
-     * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional
+     * @param {PIXI.ICanvas} [options.view] - the canvas to use as a view, optional
      * @param {boolean} [options.useContextAlpha=true] - Pass-through value for canvas' context `alpha` property.
@@ -273,3 +275,3 @@ *   If you want to set transparency, please use `backgroundAlpha`. This option is for cases where the
      * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation,
-     *  enable this if you need to call toDataUrl on the webgl context.
+     *  enable this if you need to call toDataURL on the webgl context.
      * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or
@@ -340,3 +342,3 @@ *      not before the new render pass.
     /** The canvas element that everything is drawn to.*/
-    get view(): HTMLCanvasElement;
+    get view(): ICanvas;
     /**
@@ -378,3 +380,3 @@ * Measurements of the screen. (0, 0, screenWidth, screenHeight).
      */
-    get rootContext(): CanvasRenderingContext2D;
+    get rootContext(): ICanvasRenderingContext2D;
     /**
@@ -384,3 +386,3 @@ * The currently active canvas 2d context (could change with renderTextures)
      */
-    get context(): CanvasRenderingContext2D;
+    get context(): ICanvasRenderingContext2D;
     /**
@@ -458,3 +460,3 @@ * The canvas property used to set the canvas smoothing property.
 export declare const canvasUtils: {
-    canvas: HTMLCanvasElement;
+    canvas: ICanvas;
     /**
@@ -466,7 +468,7 @@ * Basically this method just needs a sprite and a color and tints the sprite with the given color.
      * @param {number} color - the color to use to tint the sprite with
-     * @returns {HTMLCanvasElement} The tinted canvas
+     * @returns {ICanvas|HTMLImageElement} The tinted canvas
      */
     getTintedCanvas: (sprite: {
         texture: Texture;
-    }, color: number) => HTMLCanvasElement | HTMLImageElement;
+    }, color: number) => ICanvas | HTMLImageElement;
     /**
@@ -477,3 +479,3 @@ * Basically this method just needs a sprite and a color and tints the sprite with the given color.
      * @param {number} color - the color to use to tint the sprite with
-     * @returns {HTMLCanvasElement} The tinted canvas
+     * @returns {CanvasPattern} The tinted canvas
      */
@@ -486,5 +488,5 @@ getTintedPattern: (texture: Texture, color: number) => CanvasPattern;
      * @param {number} color - the color to use to tint the sprite with
-     * @param {HTMLCanvasElement} canvas - the current canvas
+     * @param {PIXI.ICanvas} canvas - the current canvas
      */
-    tintWithMultiply: (texture: Texture, color: number, canvas: HTMLCanvasElement) => void;
+    tintWithMultiply: (texture: Texture, color: number, canvas: ICanvas) => void;
     /**
@@ -495,5 +497,5 @@ * Tint a texture using the 'overlay' operation.
      * @param {number} color - the color to use to tint the sprite with
-     * @param {HTMLCanvasElement} canvas - the current canvas
+     * @param {PIXI.ICanvas} canvas - the current canvas
      */
-    tintWithOverlay: (texture: Texture, color: number, canvas: HTMLCanvasElement) => void;
+    tintWithOverlay: (texture: Texture, color: number, canvas: ICanvas) => void;
     /**
@@ -504,5 +506,5 @@ * Tint a texture pixel per pixel.
      * @param {number} color - the color to use to tint the sprite with
-     * @param {HTMLCanvasElement} canvas - the current canvas
+     * @param {PIXI.ICanvas} canvas - the current canvas
      */
-    tintWithPerPixel: (texture: Texture, color: number, canvas: HTMLCanvasElement) => void;
+    tintWithPerPixel: (texture: Texture, color: number, canvas: ICanvas) => void;
     /**
@@ -538,3 +540,3 @@ * Rounds the specified color according to the canvasUtils.cacheStepsPerColorChannel.
      */
-    tintMethod: (texture: Texture, color: number, canvas: HTMLCanvasElement) => void;
+    tintMethod: (texture: Texture, color: number, canvas: ICanvas) => void;
 };
@@ -547,3 +549,3 @@
  */
-export declare interface CrossPlatformCanvasRenderingContext2D extends CanvasRenderingContext2D {
+export declare interface CrossPlatformCanvasRenderingContext2D extends ICanvasRenderingContext2D {
     webkitImageSmoothingEnabled: boolean;
@@ -550,0 +552,0 @@ mozImageSmoothingEnabled: boolean;

package.json

 {
   "name": "@pixi/canvas-renderer",
-  "version": "7.0.0-alpha.3",
+  "version": "7.0.0-beta",
   "main": "dist/cjs/canvas-renderer.js",
@@ -41,3 +41,3 @@ "module": "dist/esm/canvas-renderer.mjs",
   ],
-  "gitHead": "e5cc328a2374fac1cb21915e8029d8a9bddb038c"
+  "gitHead": "437c2f5432320da7d6ecef6986ab95c982c89b17"
 }

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

458442

increased by0.27%

Lines of code

2128

increased by0.09%

No dependency changes