PIXI Text

by duckywang1

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.1.1/pixi.min.js"></script>
<script src="https://cdn.bootcss.com/pixi.js/4.7.0/pixi.js"></script>
<canvas id="renderer" height="300" width="300"></canvas>

JavaScript

// PIXI.settings.PRECISION_FRAGMENT = 'highp';
var renderer = PIXI.autoDetectRenderer(500, 300, {antialias: false, transparent: false, resolution: 1, view: document.getElementById("renderer")});
var mainContainer = new PIXI.Container();
var container1 = new PIXI.Container();
var graphics = new PIXI.Graphics();
graphics.beginFill(0x2c3e50); 
graphics.drawRect(10, 10, 75, 50); 
graphics.endFill();

var container2 = new PIXI.Container();
var graphics2= new PIXI.Graphics();
graphics2.beginFill(0x3c3e50); 
graphics2.drawRect(30, 30, 75, 50); 
graphics2.endFill();

container2.addChild(graphics2);
container1.addChild(graphics);
mainContainer.addChild(container1);
mainContainer.addChild(container2);

var style = new PIXI.TextStyle({
    fontSize: 19,
    fontStyle: 'italic',
    fontWeight: 'bold',
    fill: ['#b2ee42'], // gradient
    stroke: '#074a26',
    strokeThickness: 14,
    lineJoin: 'round',
    miterLimit: 22,
    // dropShadow: true,
    // dropShadowColor: '#000000',
    // dropShadowBlur: 4,
    // dropShadowAngle: Math.PI / 6,
    // dropShadowDistance: 6,
    // wordWrap: true,
    // wordWrapWidth: 440
});

 var basicText = new PIXI.Text('SATU KENARI UNYUK AKU！SATU HAPE', style);
// var basicText = new PIXI.Text('آج میں واقعی خوش ہوں', style);
basicText.x = 30;
basicText.y = 90;

mainContainer.addChild(basicText);

animate();
function animate() {
    //Render the stage
    renderer.roundPixels = true;
    renderer.render(mainContainer);
    requestAnimationFrame(animate);
}