JSFiddle - React, Tailwind, and code Playground

by shlajin

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.7.1/pixi.min.js"></script>

JavaScript

const url = "https://shlaj.in/patrick.svg"
const url2 = "https://shlaj.in/patrick.svg?nocache=1"

const app = new PIXI.Application(
 600,
 450,
);


// First one: looks bad
const nonScaledTexture = PIXI.Texture.fromImage(url, undefined, undefined, 1);
const scaledSprite = new PIXI.Sprite(nonScaledTexture)
scaledSprite.scale.x = scaledSprite.scale.y = 0.3;
app.stage.addChild(scaledSprite)

document.body.appendChild(app.view);


// Second one: looks awesome
const scaledTexture = PIXI.Texture.fromImage(url2, undefined, undefined, 0.3);
const nonScaledSprite = new PIXI.Sprite(scaledTexture)
nonScaledSprite.x = 100

app.stage.addChild(nonScaledSprite);


// Third one: attempt to re-use the first URL 
const textureFromCache = PIXI.Texture.fromImage(url, undefined, undefined, 0.3);
const mySprite = new PIXI.Sprite(textureFromCache)
mySprite.x = 300
// no scaling, since I specified 0.3 on the Texture.fromImage
app.stage.addChild(mySprite)

document.body.appendChild(app.view);