JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.8.7/pixi.js"></script>
<canvas id="canvas"></canvas>
JavaScript
// pixi latest version test
// Graphics added to RenderTexture
const canvas = document.getElementById(`canvas`);
const mainStage = new PIXI.Container();
const renderer = new PIXI.autoDetectRenderer({
width: screen.width,
height: screen.height,
antialias: false,
roundPixels: true,
resolution: 1,
view: canvas,
});
function toRadian(degrees) {
return degrees * Math.PI / 180;
}
function makeRectTexture(w, h, color) {
const g= new PIXI.Graphics();
g.beginFill(color);
g.drawRect(0, 0, w, h);
const texture = PIXI.RenderTexture.create(w, h);
renderer.render(g, texture);
return texture;
}
const parentRect = new PIXI.Sprite(makeRectTexture(50, 50, 0xff0000));
const childRect = new PIXI.Sprite(makeRectTexture(25, 20, 0x00ff00));
mainStage.addChild(parentRect);
mainStage.addChild(childRect);
parentRect.x = 100;
parentRect.y = 100;
childRect.x = 125;
childRect.y = 100;
setInterval(() => {
const newRotation = parentRect.rotation + .5;
parentRect.rotation = newRotation;
childRect.rotation = newRotation;
renderer.render(mainStage);
}, 100)