JSFiddle - React, Tailwind, and code Playground

by Maj0rrush

HTML

<script>
    /**
     * @license
     * Pixi.JS - v1.2.0
     * Copyright (c) 2012, Mat Groves
     * http://goodboydigital.com/
     *
     * Compiled: 2013-06-19
     *
     * Pixi.JS is licensed under the MIT License.
     * http://www.opensource.org/licenses/mit-license.php
     */! function() {
        function c(a) {
            return [(255 & a >> 16) / 255, (255 & a >> 8) / 255, (255 & a) / 255]
        }
        function d() {
            return f.Matrix = "undefined" != typeof Float32Array ? Float32Array : Array, f.Matrix
        }
        var e = this,
            f = f || {};
        f.Point = function(a, b) {
            this.x = a || 0, this.y = b || 0
        }, f.Point.prototype.clone = function() {
            return new f.Point(this.x, this.y)
        }, f.Point.constructor = f.Point, f.Rectangle = function(a, b, c, d) {
            this.x = a || 0, this.y = b || 0, this.width = c || 0, this.height = d || 0
        }, f.Rectangle.prototype.clone = function() {
            return new f.Rectangle(this.x, this.y, this.width, this.height)
        }, f.Rectangle.constructor = f.Rectangle, f.Polygon = function(a) {
            this.points = a
        }, f.Polygon.clone = function() {
            for (var a = [], b = 0; b < this.points.length; b++) a.push(this.points[b].clone());
            return new f.Polygon(a)
        }, f.Polygon.constructor = f.Polygon, f.DisplayObject = function() {
            this.position = new f.Point, this.scale = new f.Point(1, 1), this.pivot = new f.Point(0, 0), this.rotation = 0, this.alpha = 1, this.visible = !0, this.worldVisible = !1, this.parent = null, this.stage = null, this.hitArea = null, this.worldAlpha = 1, this.color = [], this.worldTransform = f.mat3.create(), this.localTransform = f.mat3.create(), this.dynamic = !0, this._sr = 0, this._cr = 1, this.childIndex = 0, this.renderable = !1, this.interactive = !1, this.buttonMode = !1
        }, f.DisplayObject.constructor = f.DisplayObject,...

JavaScript

// EXTEND THE PIXI TEXTURE NAMESPACE WITH THE FUNCTION FROM EZELIA
PIXI.Texture.Draw = function (cb) {
    var canvas = document.createElement('canvas');
    if (typeof cb == 'function') cb(canvas);
    return PIXI.Texture.fromCanvas(canvas);
}

var stage = new PIXI.Stage(0x000000);
RENDERER = PIXI.autoDetectRenderer(500, 500, null, false);
document.body.appendChild(RENDERER.view);

//Lets create an array of particles
var particles = [];
for (var i = 0; i < 50; i++) {
    sprite = new PIXI.Sprite(PIXI.Texture.Draw(function (canvas) {
        //we are now in a 2D context 
        var r = 10; //radius
        canvas.width = r * 2; //you need to specify your canvas width and height otherwise it'll have a size of 0x0 and you'll get an empty sprite
        canvas.height = r * 2;

        var ctx = canvas.getContext('2d'); //get  canvas 2D context

        ctx.fillStyle = 'rgb(255, 0, 0)';
        ctx.beginPath();
        ctx.arc(r, r, r, 0, Math.PI * 2, true);
        ctx.closePath();
        ctx.fill();
    }));
    
    particles.push(sprite);
    stage.addChild(sprite);
}

//Lets animate the particle
function draw() {
    //Lets draw particles from the array now
    for (var t = 0; t < particles.length; t++) {
        var p = particles[t];
    }

    RENDERER.render(stage);
}

setInterval(draw, 33);
//I hope that you enjoyed the tutorial :)