JSFiddle - React, Tailwind, and code Playground
HTML
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/3.0.7/pixi.js"></script>
CSS
canvas {
display: block;
border: 1px dashed black;
}
JavaScript
var canvas = document.createElement('canvas');
canvas.width = 400;
canvas.height = 400;
document.body.appendChild(canvas);
var renderer = PIXI.autoDetectRenderer(canvas.width, canvas.height, {view: canvas, resolution: 1});
var stage = new PIXI.Container();
function update () {
renderer.render(stage);
window.requestAnimationFrame(update);
}
var p0 = [100,100],
p1 = [100,200],
p2 = [300,200],
r = 100;
var graphics = new PIXI.Graphics();
graphics.beginFill(0x2B303B);
graphics.drawRect(0,0,window.innerWidth, window.innerHeight);
graphics.endFill();
graphics.lineStyle(3, 0xffffff);
graphics.moveTo(p0[0],p0[1]);
graphics.arcTo(
100, 200,
300, 200,
r
);
graphics.currentPath.shape.closed = false;
stage.addChild(graphics);
update();