JSFiddle - React, Tailwind, and code Playground

by Nick Hulea

HTML

<canvas id="canvas" width="500" height="500"></canvas>

JavaScript

//Lets create a simple particle system in HTML5 canvas and JS
var img1 = new Image();
//img1.onload = function () {
img1.src = 'http://i.imgur.com/fw9xd7D.png';
//};
var img2 = new Image();
//img2.onload = function () {
img2.src = 'http://i.imgur.com/uytsA56.png';
//};
var img3 = new Image();
//img3.onload = function () {
img3.src = 'http://i.imgur.com/Ur6udvA.png';
//};
var img4 = new Image();
img4.onload = function () {
    img4.src = 'http://i.imgur.com/Ur6udvA.png';
};

var flowerArr = [img1, img2, img3];
var idx = 0;

//Initializing the canvas
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

//Canvas dimensions
var W = 500;
var H = 500;

//Lets create an array of particles
var particles = [];
for (var i = 0; i < 900; i++) {
    //This will add 50 particles to the array with random positions
    particles.push(new create_particle());
}

//Lets create a function which will help us to create multiple particles
function create_particle() {
    //Random position on the canvas
    this.x = Math.random() * W;
    this.y = Math.random() * H;

    //Lets add random velocity to each particle
    this.vx = Math.random() * 0.5;
    this.vy = Math.random() * 0.5;

    //Random colors
    var r = Math.random() * 255 >> 0;
    var g = Math.random() * 255 >> 0;
    var b = Math.random() * 255 >> 0;
    this.color = "rgba(" + r + ", " + g + ", " + b + ", 0.5)";

    //Random size
    this.radius = Math.random() * 20 + 20;
}

var x = 100;
var y = 100;

//Lets animate the particle
function draw() {
    //Moving this BG paint code insde draw() will help remove the trail
    //of the particle
    //Lets paint the canvas black
    //But the BG paint shouldn't blend with the previous frame
    ctx.globalCompositeOperation = "source-over";
    //Lets reduce the opacity of the BG paint to give the final touch
    ctx.fillStyle = "rgba(0, 0, 0, 0.071)";
    ctx.fillRect(0, 0, W, H);

    //Lets blend the particle with the BG
   ...