JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.3.3/pixi.min.js"></script>
<div id="EditorSpace" style="height: 100%; width: 100%;"></div>

JavaScript

let node = document.getElementById( 'EditorSpace' );

let app = new PIXI.Application( { width: 600, height: 600, antialias: false, transparent: true, resolution: 1 } );

node.appendChild( app.view );

let graphics = new PIXI.Graphics();
app.stage.addChild( graphics );

let renderContainer = new PIXI.Container();
var brt = new PIXI.BaseRenderTexture( 60, 60, PIXI.SCALE_MODES.LINEAR, 1 );
var rt = new PIXI.RenderTexture( brt );
var sprite = new PIXI.Sprite( rt );

var sprite2 = new PIXI.Sprite( PIXI.Texture.WHITE );
sprite2.scale.x = 5;
sprite2.scale.y = 5;
renderContainer.addChild( sprite2 );

app.stage.addChild( sprite );
sprite.position.x = 200;
sprite.position.y = 200;
sprite.scale.x = 2;
sprite.scale.y = 2;
sprite2.tint = '0xFF0000';
app.renderer.render( renderContainer, rt, true, new PIXI.Matrix().translate( 30, 30) );


graphics.beginTextureFill( { texture: sprite.texture, matrix: new PIXI.Matrix().translate( -30, -30 ) } );
graphics.drawCircle( 0, 0, 100 );
graphics.endFill();
graphics.position.x = 100;
graphics.position.y = 100;