Scaling along Y-axis after rotating in Pixi.js

Question

I'm trying to create an isometric grid by rotating a square 45° and then scaling down on the (vertical) Y-axis. However, Pixi.js that I'm using, seem to scale along the local coordinate system after the rotation, resulting in a square that look skewed rather than squashed.

Is there a way to sequentially apply transforms (first rotate, then scale Y) in Pixi.js, or another method that would allow me to scale along the vertical Y after rotating?

I'm currently using the .rotation and .scale properties of a Graphics object to do my transformation.

Answer 1

I came up with a solution myself. Not quite what I wanted, but a simple solution.

1. Create a Pixi.Container that you add your Sprite/Graphics to.
2. Rotate the Sprite/Graphics and then scale the Container on the Y axis.
3. Voilá!