JSFiddle - React, Tailwind, and code Playground

by Bouh

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.8.6/pixi.js"></script>
<body>
  <img id="grid_img" style="display: none"...

JavaScript

var renderer = PIXI.autoDetectRenderer(480, 320, { antialias: true });
document.body.appendChild(renderer.view);
var stage = new PIXI.Container();

var img = document.getElementById( "grid_img" );
var texture_grid = new PIXI.Texture.from( img );

var img_sc = document.getElementById( "chicken_img" );
var texture_sc = PIXI.Texture.from( img_sc );

var sprite = new PIXI.Sprite( texture_grid );
var sprite_sc = new PIXI.Sprite( texture_sc );

// Render a circle to a texture
var texture = new PIXI.RenderTexture(renderer, 300, 300);
var graphics = new PIXI.Graphics();

graphics.beginFill(0x44FFFF);
graphics.drawCircle(8, 100, 200);
graphics.endFill();
texture.render(graphics);


 var draw = new PIXI.Sprite(texture);

 stage.addChild(sprite);
 stage.addChild(sprite_sc);
 stage.addChild(draw);

renderer.render(stage);