@pixi/canvas-sprite-tiling - npm Package Compare versions

Comparing version 5.4.0-rc.3 to 6.0.0-rc

dist/browser/canvas-sprite-tiling.js

 /*!
- * @pixi/canvas-sprite-tiling - v5.4.0-rc.3
- * Compiled Thu, 10 Dec 2020 03:22:17 UTC
+ * @pixi/canvas-sprite-tiling - v6.0.0-rc
+ * Compiled Tue, 29 Dec 2020 19:58:03 UTC
  *
@@ -12,4 +12,5 @@ * @pixi/canvas-sprite-tiling is licensed under the MIT License.
 
-    var tempMatrix = new math.Matrix();
-    var tempPoints = [new math.Point(), new math.Point(), new math.Point(), new math.Point()];
+    var worldMatrix = new math.Matrix();
+    var patternMatrix = new math.Matrix();
+    var patternRect = [new math.Point(), new math.Point(), new math.Point(), new math.Point()];
     /**
@@ -56,21 +57,87 @@ * Renders the object using the Canvas renderer
         var H = this._height;
-        tempMatrix.identity();
-        tempMatrix.copyFrom(lt);
-        tempMatrix.prepend(transform);
-        renderer.setContextTransform(tempMatrix);
-        // fill the pattern!
+        /*
+         * # Implementation Notes
+         *
+         * The tiling transform is not simply a transform on the tiling sprite's local space. If that
+         * were, the bounds of the tiling sprite would change. Rather the tile transform is a transform
+         * on the "pattern" coordinates each vertex is assigned.
+         *
+         * To implement the `tileTransform`, we issue drawing commands in the pattern's own space, which
+         * is defined as:
+         *
+         * Pattern_Space = Local_Space x inverse(tileTransform)
+         *
+         * In other words,
+         * Local_Space = Pattern_Space x tileTransform
+         *
+         * We draw the pattern in pattern space, because the space we draw in defines the pattern's coordinates.
+         * In other words, the pattern will always "originate" from (0, 0) in the space we draw in.
+         *
+         * This technique is equivalent to drawing a pattern texture, and then finding a quadrilateral that becomes
+         * the tiling sprite's local bounds under the tileTransform and mapping that onto the screen.
+         *
+         * ## uvRespectAnchor
+         *
+         * The preceding paragraph discusses the case without considering `uvRespectAnchor`. The `uvRespectAnchor` flags
+         * where the origin of the pattern space is. Assuming the tileTransform includes no translation, without
+         * loss of generality: If uvRespectAnchor = true, then
+         *
+         * Local Space (0, 0) <--> Pattern Space (0, 0) (where <--> means "maps to")
+         *
+         * Here the mapping is provided by trivially by the tileTransform (note tileTransform includes no translation. That
+         * means the invariant under all other transforms are the origins)
+         *
+         * Otherwise,
+         *
+         * Local Space (-localBounds.x, -localBounds.y) <--> Pattern Space (0, 0)
+         *
+         * Here the mapping is provided by the tileTransfrom PLUS some "shift". This shift is done POST-tileTransform. The shift
+         * is equal to the position of the top-left corner of the tiling sprite in its local space.
+         *
+         * Hence,
+         *
+         * Local_Space = Pattern_Space x tileTransform x shiftTransform
+         */
+        // worldMatrix is used to convert from pattern space to world space.
+        //
+        // worldMatrix = tileTransform x shiftTransform x worldTransfrom
+        //             = patternMatrix x worldTransform
+        worldMatrix.identity();
+        // patternMatrix is used to convert from pattern space to local space. The drawing commands are issued in pattern space
+        // and this matrix is used to inverse-map the local space vertices into it.
+        //
+        // patternMatrix = tileTransfrom x shiftTransform
+        patternMatrix.copyFrom(lt);
+        // Apply shiftTransform into patternMatrix. See $1.1
+        if (!this.uvRespectAnchor) {
+            patternMatrix.translate(-this.anchor.x * W, -this.anchor.y * H);
+        }
+        worldMatrix.prepend(patternMatrix);
+        worldMatrix.prepend(transform);
+        renderer.setContextTransform(worldMatrix);
+        // Fill the pattern!
         context.fillStyle = this._canvasPattern;
-        var anchorX = this.uvRespectAnchor ? this.anchor.x * -W : 0;
-        var anchorY = this.uvRespectAnchor ? this.anchor.y * -H : 0;
-        tempPoints[0].set(anchorX, anchorY);
-        tempPoints[1].set(anchorX + W, anchorY);
-        tempPoints[2].set(anchorX + W, anchorY + H);
-        tempPoints[3].set(anchorX, anchorY + H);
+        // The position in local space we are drawing the rectangle: (lx, ly, lx + W, ly + H)
+        var lx = this.anchor.x * -W;
+        var ly = this.anchor.y * -H;
+        // Set pattern rect in local space first.
+        patternRect[0].set(lx, ly);
+        patternRect[1].set(lx + W, ly);
+        patternRect[2].set(lx + W, ly + H);
+        patternRect[3].set(lx, ly + H);
+        // Map patternRect into pattern space.
         for (var i = 0; i < 4; i++) {
-            lt.applyInverse(tempPoints[i], tempPoints[i]);
+            patternMatrix.applyInverse(patternRect[i], patternRect[i]);
         }
+        /*
+         * # Note about verification of theory
+         *
+         * As discussed in the implementation notes, you can verify that `patternRect[0]` will always be (0, 0) in case of
+         * `uvRespectAnchor` false and tileTransform having no translation. Indeed, because the pattern origin should map
+         * to the top-left corner of the tiling sprite in its local space.
+         */
         context.beginPath();
-        context.moveTo(tempPoints[0].x, tempPoints[0].y);
+        context.moveTo(patternRect[0].x, patternRect[0].y);
         for (var i = 1; i < 4; i++) {
-            context.lineTo(tempPoints[i].x, tempPoints[i].y);
+            context.lineTo(patternRect[i].x, patternRect[i].y);
         }
@@ -77,0 +144,0 @@ context.closePath();

dist/browser/canvas-sprite-tiling.min.js

 /*!
- * @pixi/canvas-sprite-tiling - v5.4.0-rc.3
- * Compiled Thu, 10 Dec 2020 03:22:17 UTC
+ * @pixi/canvas-sprite-tiling - v6.0.0-rc
+ * Compiled Tue, 29 Dec 2020 19:58:03 UTC
  *
@@ -8,3 +8,3 @@ * @pixi/canvas-sprite-tiling is licensed under the MIT License.
  */
-this.PIXI=this.PIXI||{},function(t,e,i,a){"use strict";var n=new a.Matrix,s=[new a.Point,new a.Point,new a.Point,new a.Point];t.TilingSprite.prototype._renderCanvas=function(t){var a=this._texture;if(a.baseTexture.valid){var r=t.context,h=this.worldTransform,o=a.baseTexture,c=o.getDrawableSource(),l=o.resolution;if(this._textureID!==this._texture._updateID||this._cachedTint!==this.tint){this._textureID=this._texture._updateID;var d=new i.CanvasRenderTarget(a._frame.width,a._frame.height,l);16777215!==this.tint?(this._tintedCanvas=e.canvasUtils.getTintedCanvas(this,this.tint),d.context.drawImage(this._tintedCanvas,0,0)):d.context.drawImage(c,-a._frame.x*l,-a._frame.y*l),this._cachedTint=this.tint,this._canvasPattern=d.context.createPattern(d.canvas,"repeat")}r.globalAlpha=this.worldAlpha,t.setBlendMode(this.blendMode),this.tileTransform.updateLocalTransform();var v=this.tileTransform.localTransform,_=this._width,I=this._height;n.identity(),n.copyFrom(v),n.prepend(h),t.setContextTransform(n),r.fillStyle=this._canvasPattern;var f=this.uvRespectAnchor?this.anchor.x*-_:0,u=this.uvRespectAnchor?this.anchor.y*-I:0;s[0].set(f,u),s[1].set(f+_,u),s[2].set(f+_,u+I),s[3].set(f,u+I);for(var x=0;x<4;x++)v.applyInverse(s[x],s[x]);r.beginPath(),r.moveTo(s[0].x,s[0].y);for(x=1;x<4;x++)r.lineTo(s[x].x,s[x].y);r.closePath(),r.fill()}}}(PIXI,PIXI,PIXI.utils,PIXI);
+this.PIXI=this.PIXI||{},function(t,e,a,i){"use strict";var n=new i.Matrix,r=new i.Matrix,s=[new i.Point,new i.Point,new i.Point,new i.Point];t.TilingSprite.prototype._renderCanvas=function(t){var i=this._texture;if(i.baseTexture.valid){var h=t.context,o=this.worldTransform,l=i.baseTexture,c=l.getDrawableSource(),d=l.resolution;if(this._textureID!==this._texture._updateID||this._cachedTint!==this.tint){this._textureID=this._texture._updateID;var v=new a.CanvasRenderTarget(i._frame.width,i._frame.height,d);16777215!==this.tint?(this._tintedCanvas=e.canvasUtils.getTintedCanvas(this,this.tint),v.context.drawImage(this._tintedCanvas,0,0)):v.context.drawImage(c,-i._frame.x*d,-i._frame.y*d),this._cachedTint=this.tint,this._canvasPattern=v.context.createPattern(v.canvas,"repeat")}h.globalAlpha=this.worldAlpha,t.setBlendMode(this.blendMode),this.tileTransform.updateLocalTransform();var _=this.tileTransform.localTransform,x=this._width,I=this._height;n.identity(),r.copyFrom(_),this.uvRespectAnchor||r.translate(-this.anchor.x*x,-this.anchor.y*I),n.prepend(r),n.prepend(o),t.setContextTransform(n),h.fillStyle=this._canvasPattern;var f=this.anchor.x*-x,p=this.anchor.y*-I;s[0].set(f,p),s[1].set(f+x,p),s[2].set(f+x,p+I),s[3].set(f,p+I);for(var u=0;u<4;u++)r.applyInverse(s[u],s[u]);h.beginPath(),h.moveTo(s[0].x,s[0].y);for(u=1;u<4;u++)h.lineTo(s[u].x,s[u].y);h.closePath(),h.fill()}}}(PIXI,PIXI,PIXI.utils,PIXI);
 //# sourceMappingURL=canvas-sprite-tiling.min.js.map

dist/cjs/canvas-sprite-tiling.js

 /*!
- * @pixi/canvas-sprite-tiling - v5.4.0-rc.3
- * Compiled Thu, 10 Dec 2020 03:22:17 UTC
+ * @pixi/canvas-sprite-tiling - v6.0.0-rc
+ * Compiled Tue, 29 Dec 2020 19:58:03 UTC
  *
@@ -15,4 +15,5 @@ * @pixi/canvas-sprite-tiling is licensed under the MIT License.
 
-var tempMatrix = new math.Matrix();
-var tempPoints = [new math.Point(), new math.Point(), new math.Point(), new math.Point()];
+var worldMatrix = new math.Matrix();
+var patternMatrix = new math.Matrix();
+var patternRect = [new math.Point(), new math.Point(), new math.Point(), new math.Point()];
 /**
@@ -59,21 +60,87 @@ * Renders the object using the Canvas renderer
     var H = this._height;
-    tempMatrix.identity();
-    tempMatrix.copyFrom(lt);
-    tempMatrix.prepend(transform);
-    renderer.setContextTransform(tempMatrix);
-    // fill the pattern!
+    /*
+     * # Implementation Notes
+     *
+     * The tiling transform is not simply a transform on the tiling sprite's local space. If that
+     * were, the bounds of the tiling sprite would change. Rather the tile transform is a transform
+     * on the "pattern" coordinates each vertex is assigned.
+     *
+     * To implement the `tileTransform`, we issue drawing commands in the pattern's own space, which
+     * is defined as:
+     *
+     * Pattern_Space = Local_Space x inverse(tileTransform)
+     *
+     * In other words,
+     * Local_Space = Pattern_Space x tileTransform
+     *
+     * We draw the pattern in pattern space, because the space we draw in defines the pattern's coordinates.
+     * In other words, the pattern will always "originate" from (0, 0) in the space we draw in.
+     *
+     * This technique is equivalent to drawing a pattern texture, and then finding a quadrilateral that becomes
+     * the tiling sprite's local bounds under the tileTransform and mapping that onto the screen.
+     *
+     * ## uvRespectAnchor
+     *
+     * The preceding paragraph discusses the case without considering `uvRespectAnchor`. The `uvRespectAnchor` flags
+     * where the origin of the pattern space is. Assuming the tileTransform includes no translation, without
+     * loss of generality: If uvRespectAnchor = true, then
+     *
+     * Local Space (0, 0) <--> Pattern Space (0, 0) (where <--> means "maps to")
+     *
+     * Here the mapping is provided by trivially by the tileTransform (note tileTransform includes no translation. That
+     * means the invariant under all other transforms are the origins)
+     *
+     * Otherwise,
+     *
+     * Local Space (-localBounds.x, -localBounds.y) <--> Pattern Space (0, 0)
+     *
+     * Here the mapping is provided by the tileTransfrom PLUS some "shift". This shift is done POST-tileTransform. The shift
+     * is equal to the position of the top-left corner of the tiling sprite in its local space.
+     *
+     * Hence,
+     *
+     * Local_Space = Pattern_Space x tileTransform x shiftTransform
+     */
+    // worldMatrix is used to convert from pattern space to world space.
+    //
+    // worldMatrix = tileTransform x shiftTransform x worldTransfrom
+    //             = patternMatrix x worldTransform
+    worldMatrix.identity();
+    // patternMatrix is used to convert from pattern space to local space. The drawing commands are issued in pattern space
+    // and this matrix is used to inverse-map the local space vertices into it.
+    //
+    // patternMatrix = tileTransfrom x shiftTransform
+    patternMatrix.copyFrom(lt);
+    // Apply shiftTransform into patternMatrix. See $1.1
+    if (!this.uvRespectAnchor) {
+        patternMatrix.translate(-this.anchor.x * W, -this.anchor.y * H);
+    }
+    worldMatrix.prepend(patternMatrix);
+    worldMatrix.prepend(transform);
+    renderer.setContextTransform(worldMatrix);
+    // Fill the pattern!
     context.fillStyle = this._canvasPattern;
-    var anchorX = this.uvRespectAnchor ? this.anchor.x * -W : 0;
-    var anchorY = this.uvRespectAnchor ? this.anchor.y * -H : 0;
-    tempPoints[0].set(anchorX, anchorY);
-    tempPoints[1].set(anchorX + W, anchorY);
-    tempPoints[2].set(anchorX + W, anchorY + H);
-    tempPoints[3].set(anchorX, anchorY + H);
+    // The position in local space we are drawing the rectangle: (lx, ly, lx + W, ly + H)
+    var lx = this.anchor.x * -W;
+    var ly = this.anchor.y * -H;
+    // Set pattern rect in local space first.
+    patternRect[0].set(lx, ly);
+    patternRect[1].set(lx + W, ly);
+    patternRect[2].set(lx + W, ly + H);
+    patternRect[3].set(lx, ly + H);
+    // Map patternRect into pattern space.
     for (var i = 0; i < 4; i++) {
-        lt.applyInverse(tempPoints[i], tempPoints[i]);
+        patternMatrix.applyInverse(patternRect[i], patternRect[i]);
     }
+    /*
+     * # Note about verification of theory
+     *
+     * As discussed in the implementation notes, you can verify that `patternRect[0]` will always be (0, 0) in case of
+     * `uvRespectAnchor` false and tileTransform having no translation. Indeed, because the pattern origin should map
+     * to the top-left corner of the tiling sprite in its local space.
+     */
     context.beginPath();
-    context.moveTo(tempPoints[0].x, tempPoints[0].y);
+    context.moveTo(patternRect[0].x, patternRect[0].y);
     for (var i = 1; i < 4; i++) {
-        context.lineTo(tempPoints[i].x, tempPoints[i].y);
+        context.lineTo(patternRect[i].x, patternRect[i].y);
     }
@@ -80,0 +147,0 @@ context.closePath();

dist/cjs/canvas-sprite-tiling.min.js

 /*!
- * @pixi/canvas-sprite-tiling - v5.4.0-rc.3
- * Compiled Thu, 10 Dec 2020 03:22:17 UTC
+ * @pixi/canvas-sprite-tiling - v6.0.0-rc
+ * Compiled Tue, 29 Dec 2020 19:58:03 UTC
  *
@@ -8,3 +8,3 @@ * @pixi/canvas-sprite-tiling is licensed under the MIT License.
  */
-"use strict";var spriteTiling=require("@pixi/sprite-tiling"),canvasRenderer=require("@pixi/canvas-renderer"),utils=require("@pixi/utils"),math=require("@pixi/math"),tempMatrix=new math.Matrix,tempPoints=[new math.Point,new math.Point,new math.Point,new math.Point];spriteTiling.TilingSprite.prototype._renderCanvas=function(t){var e=this._texture;if(e.baseTexture.valid){var i=t.context,a=this.worldTransform,r=e.baseTexture,n=r.getDrawableSource(),s=r.resolution;if(this._textureID!==this._texture._updateID||this._cachedTint!==this.tint){this._textureID=this._texture._updateID;var o=new utils.CanvasRenderTarget(e._frame.width,e._frame.height,s);16777215!==this.tint?(this._tintedCanvas=canvasRenderer.canvasUtils.getTintedCanvas(this,this.tint),o.context.drawImage(this._tintedCanvas,0,0)):o.context.drawImage(n,-e._frame.x*s,-e._frame.y*s),this._cachedTint=this.tint,this._canvasPattern=o.context.createPattern(o.canvas,"repeat")}i.globalAlpha=this.worldAlpha,t.setBlendMode(this.blendMode),this.tileTransform.updateLocalTransform();var h=this.tileTransform.localTransform,p=this._width,m=this._height;tempMatrix.identity(),tempMatrix.copyFrom(h),tempMatrix.prepend(a),t.setContextTransform(tempMatrix),i.fillStyle=this._canvasPattern;var l=this.uvRespectAnchor?this.anchor.x*-p:0,c=this.uvRespectAnchor?this.anchor.y*-m:0;tempPoints[0].set(l,c),tempPoints[1].set(l+p,c),tempPoints[2].set(l+p,c+m),tempPoints[3].set(l,c+m);for(var d=0;d<4;d++)h.applyInverse(tempPoints[d],tempPoints[d]);i.beginPath(),i.moveTo(tempPoints[0].x,tempPoints[0].y);for(d=1;d<4;d++)i.lineTo(tempPoints[d].x,tempPoints[d].y);i.closePath(),i.fill()}};
+"use strict";var spriteTiling=require("@pixi/sprite-tiling"),canvasRenderer=require("@pixi/canvas-renderer"),utils=require("@pixi/utils"),math=require("@pixi/math"),worldMatrix=new math.Matrix,patternMatrix=new math.Matrix,patternRect=[new math.Point,new math.Point,new math.Point,new math.Point];spriteTiling.TilingSprite.prototype._renderCanvas=function(t){var e=this._texture;if(e.baseTexture.valid){var r=t.context,a=this.worldTransform,i=e.baseTexture,n=i.getDrawableSource(),s=i.resolution;if(this._textureID!==this._texture._updateID||this._cachedTint!==this.tint){this._textureID=this._texture._updateID;var h=new utils.CanvasRenderTarget(e._frame.width,e._frame.height,s);16777215!==this.tint?(this._tintedCanvas=canvasRenderer.canvasUtils.getTintedCanvas(this,this.tint),h.context.drawImage(this._tintedCanvas,0,0)):h.context.drawImage(n,-e._frame.x*s,-e._frame.y*s),this._cachedTint=this.tint,this._canvasPattern=h.context.createPattern(h.canvas,"repeat")}r.globalAlpha=this.worldAlpha,t.setBlendMode(this.blendMode),this.tileTransform.updateLocalTransform();var o=this.tileTransform.localTransform,c=this._width,p=this._height;worldMatrix.identity(),patternMatrix.copyFrom(o),this.uvRespectAnchor||patternMatrix.translate(-this.anchor.x*c,-this.anchor.y*p),worldMatrix.prepend(patternMatrix),worldMatrix.prepend(a),t.setContextTransform(worldMatrix),r.fillStyle=this._canvasPattern;var l=this.anchor.x*-c,x=this.anchor.y*-p;patternRect[0].set(l,x),patternRect[1].set(l+c,x),patternRect[2].set(l+c,x+p),patternRect[3].set(l,x+p);for(var d=0;d<4;d++)patternMatrix.applyInverse(patternRect[d],patternRect[d]);r.beginPath(),r.moveTo(patternRect[0].x,patternRect[0].y);for(d=1;d<4;d++)r.lineTo(patternRect[d].x,patternRect[d].y);r.closePath(),r.fill()}};
 //# sourceMappingURL=canvas-sprite-tiling.min.js.map

dist/esm/canvas-sprite-tiling.js

 /*!
- * @pixi/canvas-sprite-tiling - v5.4.0-rc.3
- * Compiled Thu, 10 Dec 2020 03:22:17 UTC
+ * @pixi/canvas-sprite-tiling - v6.0.0-rc
+ * Compiled Tue, 29 Dec 2020 19:58:03 UTC
  *
@@ -13,4 +13,5 @@ * @pixi/canvas-sprite-tiling is licensed under the MIT License.
 
-var tempMatrix = new Matrix();
-var tempPoints = [new Point(), new Point(), new Point(), new Point()];
+var worldMatrix = new Matrix();
+var patternMatrix = new Matrix();
+var patternRect = [new Point(), new Point(), new Point(), new Point()];
 /**
@@ -57,21 +58,87 @@ * Renders the object using the Canvas renderer
     var H = this._height;
-    tempMatrix.identity();
-    tempMatrix.copyFrom(lt);
-    tempMatrix.prepend(transform);
-    renderer.setContextTransform(tempMatrix);
-    // fill the pattern!
+    /*
+     * # Implementation Notes
+     *
+     * The tiling transform is not simply a transform on the tiling sprite's local space. If that
+     * were, the bounds of the tiling sprite would change. Rather the tile transform is a transform
+     * on the "pattern" coordinates each vertex is assigned.
+     *
+     * To implement the `tileTransform`, we issue drawing commands in the pattern's own space, which
+     * is defined as:
+     *
+     * Pattern_Space = Local_Space x inverse(tileTransform)
+     *
+     * In other words,
+     * Local_Space = Pattern_Space x tileTransform
+     *
+     * We draw the pattern in pattern space, because the space we draw in defines the pattern's coordinates.
+     * In other words, the pattern will always "originate" from (0, 0) in the space we draw in.
+     *
+     * This technique is equivalent to drawing a pattern texture, and then finding a quadrilateral that becomes
+     * the tiling sprite's local bounds under the tileTransform and mapping that onto the screen.
+     *
+     * ## uvRespectAnchor
+     *
+     * The preceding paragraph discusses the case without considering `uvRespectAnchor`. The `uvRespectAnchor` flags
+     * where the origin of the pattern space is. Assuming the tileTransform includes no translation, without
+     * loss of generality: If uvRespectAnchor = true, then
+     *
+     * Local Space (0, 0) <--> Pattern Space (0, 0) (where <--> means "maps to")
+     *
+     * Here the mapping is provided by trivially by the tileTransform (note tileTransform includes no translation. That
+     * means the invariant under all other transforms are the origins)
+     *
+     * Otherwise,
+     *
+     * Local Space (-localBounds.x, -localBounds.y) <--> Pattern Space (0, 0)
+     *
+     * Here the mapping is provided by the tileTransfrom PLUS some "shift". This shift is done POST-tileTransform. The shift
+     * is equal to the position of the top-left corner of the tiling sprite in its local space.
+     *
+     * Hence,
+     *
+     * Local_Space = Pattern_Space x tileTransform x shiftTransform
+     */
+    // worldMatrix is used to convert from pattern space to world space.
+    //
+    // worldMatrix = tileTransform x shiftTransform x worldTransfrom
+    //             = patternMatrix x worldTransform
+    worldMatrix.identity();
+    // patternMatrix is used to convert from pattern space to local space. The drawing commands are issued in pattern space
+    // and this matrix is used to inverse-map the local space vertices into it.
+    //
+    // patternMatrix = tileTransfrom x shiftTransform
+    patternMatrix.copyFrom(lt);
+    // Apply shiftTransform into patternMatrix. See $1.1
+    if (!this.uvRespectAnchor) {
+        patternMatrix.translate(-this.anchor.x * W, -this.anchor.y * H);
+    }
+    worldMatrix.prepend(patternMatrix);
+    worldMatrix.prepend(transform);
+    renderer.setContextTransform(worldMatrix);
+    // Fill the pattern!
     context.fillStyle = this._canvasPattern;
-    var anchorX = this.uvRespectAnchor ? this.anchor.x * -W : 0;
-    var anchorY = this.uvRespectAnchor ? this.anchor.y * -H : 0;
-    tempPoints[0].set(anchorX, anchorY);
-    tempPoints[1].set(anchorX + W, anchorY);
-    tempPoints[2].set(anchorX + W, anchorY + H);
-    tempPoints[3].set(anchorX, anchorY + H);
+    // The position in local space we are drawing the rectangle: (lx, ly, lx + W, ly + H)
+    var lx = this.anchor.x * -W;
+    var ly = this.anchor.y * -H;
+    // Set pattern rect in local space first.
+    patternRect[0].set(lx, ly);
+    patternRect[1].set(lx + W, ly);
+    patternRect[2].set(lx + W, ly + H);
+    patternRect[3].set(lx, ly + H);
+    // Map patternRect into pattern space.
     for (var i = 0; i < 4; i++) {
-        lt.applyInverse(tempPoints[i], tempPoints[i]);
+        patternMatrix.applyInverse(patternRect[i], patternRect[i]);
     }
+    /*
+     * # Note about verification of theory
+     *
+     * As discussed in the implementation notes, you can verify that `patternRect[0]` will always be (0, 0) in case of
+     * `uvRespectAnchor` false and tileTransform having no translation. Indeed, because the pattern origin should map
+     * to the top-left corner of the tiling sprite in its local space.
+     */
     context.beginPath();
-    context.moveTo(tempPoints[0].x, tempPoints[0].y);
+    context.moveTo(patternRect[0].x, patternRect[0].y);
     for (var i = 1; i < 4; i++) {
-        context.lineTo(tempPoints[i].x, tempPoints[i].y);
+        context.lineTo(patternRect[i].x, patternRect[i].y);
     }
@@ -78,0 +145,0 @@ context.closePath();

dist/esm/canvas-sprite-tiling.min.js

 /*!
- * @pixi/canvas-sprite-tiling - v5.4.0-rc.3
- * Compiled Thu, 10 Dec 2020 03:22:17 UTC
+ * @pixi/canvas-sprite-tiling - v6.0.0-rc
+ * Compiled Tue, 29 Dec 2020 19:58:03 UTC
  *
@@ -8,3 +8,3 @@ * @pixi/canvas-sprite-tiling is licensed under the MIT License.
  */
-import{TilingSprite as t}from"@pixi/sprite-tiling";import{canvasUtils as e}from"@pixi/canvas-renderer";import{CanvasRenderTarget as i}from"@pixi/utils";import{Matrix as r,Point as a}from"@pixi/math";var s=new r,n=[new a,new a,new a,new a];t.prototype._renderCanvas=function(t){var r=this._texture;if(r.baseTexture.valid){var a=t.context,h=this.worldTransform,o=r.baseTexture,l=o.getDrawableSource(),c=o.resolution;if(this._textureID!==this._texture._updateID||this._cachedTint!==this.tint){this._textureID=this._texture._updateID;var p=new i(r._frame.width,r._frame.height,c);16777215!==this.tint?(this._tintedCanvas=e.getTintedCanvas(this,this.tint),p.context.drawImage(this._tintedCanvas,0,0)):p.context.drawImage(l,-r._frame.x*c,-r._frame.y*c),this._cachedTint=this.tint,this._canvasPattern=p.context.createPattern(p.canvas,"repeat")}a.globalAlpha=this.worldAlpha,t.setBlendMode(this.blendMode),this.tileTransform.updateLocalTransform();var d=this.tileTransform.localTransform,m=this._width,f=this._height;s.identity(),s.copyFrom(d),s.prepend(h),t.setContextTransform(s),a.fillStyle=this._canvasPattern;var v=this.uvRespectAnchor?this.anchor.x*-m:0,x=this.uvRespectAnchor?this.anchor.y*-f:0;n[0].set(v,x),n[1].set(v+m,x),n[2].set(v+m,x+f),n[3].set(v,x+f);for(var _=0;_<4;_++)d.applyInverse(n[_],n[_]);a.beginPath(),a.moveTo(n[0].x,n[0].y);for(_=1;_<4;_++)a.lineTo(n[_].x,n[_].y);a.closePath(),a.fill()}};
+import{TilingSprite as t}from"@pixi/sprite-tiling";import{canvasUtils as e}from"@pixi/canvas-renderer";import{CanvasRenderTarget as i}from"@pixi/utils";import{Matrix as r,Point as a}from"@pixi/math";var n=new r,s=new r,h=[new a,new a,new a,new a];t.prototype._renderCanvas=function(t){var r=this._texture;if(r.baseTexture.valid){var a=t.context,o=this.worldTransform,l=r.baseTexture,c=l.getDrawableSource(),p=l.resolution;if(this._textureID!==this._texture._updateID||this._cachedTint!==this.tint){this._textureID=this._texture._updateID;var d=new i(r._frame.width,r._frame.height,p);16777215!==this.tint?(this._tintedCanvas=e.getTintedCanvas(this,this.tint),d.context.drawImage(this._tintedCanvas,0,0)):d.context.drawImage(c,-r._frame.x*p,-r._frame.y*p),this._cachedTint=this.tint,this._canvasPattern=d.context.createPattern(d.canvas,"repeat")}a.globalAlpha=this.worldAlpha,t.setBlendMode(this.blendMode),this.tileTransform.updateLocalTransform();var m=this.tileTransform.localTransform,f=this._width,x=this._height;n.identity(),s.copyFrom(m),this.uvRespectAnchor||s.translate(-this.anchor.x*f,-this.anchor.y*x),n.prepend(s),n.prepend(o),t.setContextTransform(n),a.fillStyle=this._canvasPattern;var _=this.anchor.x*-f,v=this.anchor.y*-x;h[0].set(_,v),h[1].set(_+f,v),h[2].set(_+f,v+x),h[3].set(_,v+x);for(var u=0;u<4;u++)s.applyInverse(h[u],h[u]);a.beginPath(),a.moveTo(h[0].x,h[0].y);for(u=1;u<4;u++)a.lineTo(h[u].x,h[u].y);a.closePath(),a.fill()}};
 //# sourceMappingURL=canvas-sprite-tiling.min.js.map

package.json

 {
   "name": "@pixi/canvas-sprite-tiling",
-  "version": "5.4.0-rc.3",
+  "version": "6.0.0-rc",
   "main": "dist/cjs/canvas-sprite-tiling.js",
@@ -29,9 +29,9 @@ "module": "dist/esm/canvas-sprite-tiling.js",
   "dependencies": {
-    "@pixi/canvas-renderer": "5.4.0-rc.3",
-    "@pixi/canvas-sprite": "5.4.0-rc.3",
-    "@pixi/math": "5.4.0-rc.3",
-    "@pixi/sprite-tiling": "5.4.0-rc.3",
-    "@pixi/utils": "5.4.0-rc.3"
+    "@pixi/canvas-renderer": "6.0.0-rc",
+    "@pixi/canvas-sprite": "6.0.0-rc",
+    "@pixi/math": "6.0.0-rc",
+    "@pixi/sprite-tiling": "6.0.0-rc",
+    "@pixi/utils": "6.0.0-rc"
   },
-  "gitHead": "0c48db94f0521d85cc226fc4b15f69c30d53c765"
+  "gitHead": "15513755f4d9f2112df5cc261b44f2dc1f05e00c"
 }

No alert changes

Improved metrics

Total package byte prevSize

84097

increased by59.46%

Lines of code

486

increased by70.53%

Dependency changes

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

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

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

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

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

• + Added@pixi/display@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/sprite@6.0.0-rc(transitive)

• + Added@pixi/sprite-tiling@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/canvas-display@5.4.0-rc.3(transitive)

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

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

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

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

• - Removed@pixi/display@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/sprite@5.4.0-rc.3(transitive)

• - Removed@pixi/sprite-tiling@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/canvas-renderer@6.0.0-rc

• Updated@pixi/canvas-sprite@6.0.0-rc

• Updated@pixi/math@6.0.0-rc

• Updated@pixi/sprite-tiling@6.0.0-rc

• Updated@pixi/utils@6.0.0-rc