Fixing CanvasSpriteRenderer to correctly render sprites with rotated base textures

packages/canvas-sprite/src/CanvasSpriteRenderer.ts

@@ -119,11 +119,6 @@ export class CanvasSpriteRenderer
             // the anchor has already been applied above, so lets set it to zero
             dx = 0;
             dy = 0;
-
-            const h = destWidth;
-
-            destWidth = destHeight;
-            destHeight = h;
         }
 
         dx -= destWidth / 2;

packages/canvas-sprite/test/CanvasSpriteRenderer.tests.ts

@@ -82,4 +82,70 @@ describe('CanvasSpriteRenderer', () =>
         expect(pixels[10]).toEqual(0);
         expect(pixels[11]).toEqual(255);
     });
+
+    it('should render a sprite with a rotated base texture correctly', () =>
+    {
+        // create a 4x2 texture, left 2x2 red, right 2x2 green
+        const canvas = document.createElement('canvas');
+        const context = canvas.getContext('2d');
+
+        canvas.width = 4;
+        canvas.height = 2;
+
+        context.fillStyle = '#ff0000';
+        context.fillRect(0, 0, 2, 2);
+
+        context.fillStyle = '#00ff00';
+        context.fillRect(2, 0, 2, 2);
+
+        const baseTexture = new BaseTexture(new CanvasResource(canvas), {
+            mipmap: MIPMAP_MODES.OFF,
+            scaleMode: SCALE_MODES.NEAREST
+        });
+
+        const frame = new Rectangle(0, 0, 4, 2);
+        const orig  = new Rectangle(0, 0, 2, 4);
+
+        // create a sprite with a texture that treats this base texture as rotated
+        // (now a 2x4 texture with the top 2x2 green, bottom 2x2 red)
+        const testSprite = new Sprite(new Texture(baseTexture, frame, orig, null, 2));
+
+        const stage = new Container();
+
+        stage.addChild(testSprite);
+
+        const renderer = new CanvasRenderer();
+
+        renderer.render(stage);
+
+        const ctx = renderer.view.getContext('2d');
+
+        // grab 2x2 pixels from corner where the two 2x2s meet on the right edge,
+        // so we can check nothing is rendering wider than it should
+        const pixels = ctx.getImageData(1, 1, 2, 2).data;
+
+        // the top left pixel should be green
+        expect(pixels[0]).toEqual(0);
+        expect(pixels[1]).toEqual(255);
+        expect(pixels[2]).toEqual(0);
+        expect(pixels[3]).toEqual(255);
+
+        // the top right pixel should be black (not being rendered to)
+        expect(pixels[4]).toEqual(0);
+        expect(pixels[5]).toEqual(0);
+        expect(pixels[6]).toEqual(0);
+        expect(pixels[7]).toEqual(255);
+
+        // the bottom left pixel should be red
+        expect(pixels[8]).toEqual(255);
+        expect(pixels[9]).toEqual(0);
+        expect(pixels[10]).toEqual(0);
+        expect(pixels[11]).toEqual(255);
+
+        // the bottom right pixel should also black (not being rendered to)
+        expect(pixels[12]).toEqual(0);
+        expect(pixels[13]).toEqual(0);
+        expect(pixels[14]).toEqual(0);
+        expect(pixels[15]).toEqual(255);
+    });
 });