JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.5.1/pixi.min.js"></script>
<div id="display"/>
JavaScript
function GameManager() {
this.renderer = PIXI.autoDetectRenderer(200, 200,{
resolution: window.devicePixelRatio
});
this.world = new PIXI.Container();
this.top = 0
this.bottom = 200
this.right = 200;
this.left = 0;
document.getElementById("display").appendChild(this.renderer.view);
this.showCorners();
this.renderer.render(this.world);
}
GameManager.prototype.showCorners = function() {
var boundaries = new PIXI.Graphics();
boundaries.lineStyle(3, 0x004d00);
boundaries.drawCircle(this.left, this.top, 50);
boundaries.drawCircle(this.left, this.top, 10);
boundaries.drawCircle(this.left, this.top, 2);
boundaries.drawCircle(this.right, this.top, 50);
boundaries.drawCircle(this.right, this.top, 10);
boundaries.drawCircle(this.right, this.top, 2);
boundaries.drawCircle(this.left, this.bottom, 50);
boundaries.drawCircle(this.left, this.bottom, 10);
boundaries.drawCircle(this.left, this.bottom, 2);
boundaries.drawCircle(this.right, this.bottom, 50);
boundaries.drawCircle(this.right, this.bottom, 10);
boundaries.drawCircle(this.right, this.bottom, 2);
var texture = this.renderer.generateTexture(boundaries);
var spr = new PIXI.Sprite(texture);
spr.position.x = spr.position.y = 100;
spr.anchor.set(0.5, 0.5);
this.world.addChild(spr);
}
new GameManager();