JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/3.0.7/pixi.js"></script>
CSS
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v15/uYECMKoHcO9x1wdmbyHIm3-_kf6ByYO6CLYdB4HQE-Y.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
JavaScript
'use strict';
(function () {
var renderer = new window.PIXI.CanvasRenderer(400, 400),
stage = new window.PIXI.Container(),
textObject;
stage.width = stage.height = 400;
renderer.backgroundColor = 0xFF0000;
document.body.appendChild(renderer.view);
textObject = new window.PIXI.Text('Test Value', {
font: 'bold 64px Roboto',
fill: '#FFFFFF'
});
stage.addChild(textObject);
window.requestAnimationFrame(animate);
function animate() {
renderer.render(stage);
window.requestAnimationFrame(animate);
}
})();