JSFiddle - React, Tailwind, and code Playground

by adil_invideo

HTML

<script src="https://pixijs.download/v6.0.2/pixi.min.js"></script>

JavaScript

PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.LINEAR;
 PIXI.settings.RESOLUTION = window.devicePixelRatio || 1;
 /*PIXI.settings.ROUND_PIXELS = true; */

 const width = 100;
 const height = 100;

 const devicePixelRatio = window.devicePixelRatio || 1;
 const app = new PIXI.Application({
   width: 854 / devicePixelRatio,
   height: 480 / devicePixelRatio,
   backgroundColor: 0x1099bb,
   antialias: true,
   resolution: devicePixelRatio
 });

 document.body.appendChild(app.view);

 const url = "https://invideo-uploads-ap-south-1.s3.ap-south-1.amazonaws.com/GettyImages9658804961607586347303.jpg";
 // url2 is 480, requires CORS ORIGIN
 const url2 = "https://d1c7ic18uy0m4b.cloudfront.net/480x480/GettyImages9658804961607586347303.jpg";

 const url3 = "https://wallpaperaccess.com/full/1138975.jpg";


 const url4 = "https://kinsta.com/wp-content/uploads/2018/07/social-media-image-sizes-1-1024x512.png";

 const url5 = "https://d1c7ic18uy0m4b.cloudfront.net/480x480/test1619729254096YSHCWKWE.jpeg";
 const url6 = "https://ik.imagekit.io/sb8yfmfebk/tr:w-100,h-100/default-image.jpg"

 const url7 = "https://ik.imagekit.io/sb8yfmfebk/tr:w-300,h-300/default-image.jpg";

 const canvas = document.createElement("canvas");


 const img = new Image();
 img.crossOrigin = 'anonymous';
 img.onload = (i) => {


   canvas.width = img.width;
   canvas.height = img.height;
   var imgCtx = canvas.getContext('2d');
   imgCtx.imageSmoothingEnabled = false;
   imgCtx.webkitImageSmoothingEnabled = false;
   imgCtx.mozImageSmoothingEnabled = false;
   imgCtx.drawImage(img, 0, 0);

   //resize
   //resample_single(canvas, width, height, true);
  const newC = downScaleCanvas(canvas, 0.99);






   var baseTexture = new PIXI.BaseTexture(newC, PIXI.SCALE_MODES.LINEAR, 2);
   /* var baseTexture = new PIXI.BaseTexture(canvas, PIXI.SCALE_MODES.LINEAR, 2); */
   baseTexture.mipmap = PIXI.MIPMAP_MODES.ON;
   //console.log(baseTexture);

   var texture = new PIXI.Texture(baseTexture);

   const sprite =...