JSFiddle - React, Tailwind, and code Playground

by adil_invideo

HTML

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

JavaScript

const aspects = {
	"480" : [852, 480],
	"720" : [1280, 720],
  "1080" : [1920, 1080],
}

const selectedAspect = aspects["480"];
const app = new PIXI.Application({
  width: 2560,
  height: 1440,
  backgroundColor: 0x1099bb,
  antialias: true,
  forceFXAA: true,
  devicePixelRatio: 2
});

document.body.appendChild(app.view);


const container = new PIXI.Container();

app.stage.addChild(container);

const url = 'https://d1c7ic18uy0m4b.cloudfront.net/previews-480/paw1613712994208.webm';
const url2 = 'https://dulpz3imcxnof.cloudfront.net/invideo-block-assets/ICONS/Halloween_potion_1_SD2.webm';
const url3 = 'https://media.gettyimages.com/photos/group-of-people-wear-the-masks-running-in-the-city-picture-id1278877446?b=1&k=6&m=1278877446&s=612x612&w=0&h=NZP5IDztmRKTbUW1tvmVLipkU89VJbuQjYAHFhGL4Jc=';

const url4 = 'https://dulpz3imcxnof.cloudfront.net/invideo-block-assets/ICONS/LOVE_(44).webm';


// Create a new texture

const sprite = PIXI.Sprite.from(url2);
sprite.width = 96.66666666666664;
sprite.height = 109.828125;
sprite.x = 50;

const sprite2 = PIXI.Sprite.from(url);
sprite2.x = 300;
sprite2.width = 111.13043478260869;
sprite2.height = 110.14492753623193;

const sprite3 = PIXI.Sprite.from(url3);
sprite3.width = 280;
sprite3.height = 180;

const sprite4 = PIXI.Sprite.from(url4);
sprite4.width = 180;
sprite4.height = 180;
sprite4.y = 200;

app.view.style.width = 400;



app.stage.addChild(sprite);
app.stage.addChild(sprite2);
app.stage.addChild(sprite3);
app.stage.addChild(sprite4);

const sprite5 = PIXI.Sprite.from("https://s3.ap-south-1.amazonaws.com/republic-invideo/girl_1612460546360.png");
const c = new PIXI.Container();
c.width = 200;
c.height = 200;
c.x = 200;
c.y = 200;




sprite5.scale.x = 1.0;
sprite5.scale.y = 1.0;

sprite5.width = 400;
sprite5.height = 300;

c.addChild(sprite5);

app.stage.addChild(c);
console.log(c.width, c.height);