JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://github.com/pixijs/pixi.js/releases/download/v4.6.2/pixi.min.js"></script>
<button id="resize">Resize</button>
<p>
<canvas id="canvas" style="outline: none;"></canvas>
</p>
JavaScript
var renderOptions =
{
transparent : false,
autoResize:true,
backgroundColor:0xdddddd,
resolution : window.devicePixelRatio,
view : document.getElementById('canvas')
};
var renderer = new PIXI.WebGLRenderer(400,400, renderOptions);
// create the root of the scene graph
var stage = new PIXI.Container();
// create a new Sprite using the texture
var graphic = new PIXI.Graphics();
graphic.beginFill(0xFF0000,1);
graphic.drawRect(0,0,50,50);
graphic.endFill();
//add grass objects to the stage
stage.addChild(graphic);
var update = function()
{
renderer.render(stage);
requestAnimationFrame(update);
}
update();
document.getElementById('resize').addEventListener("click", function() {
var width = Math.random() * 200 + 200;
var height = Math.random() * 200 + 200;
renderer.clear();
renderer.resize(width, height);
})