JSFiddle - React, Tailwind, and code Playground

by TimPietrusky

HTML

<img src="http://astronautz.com/wordpress/wp-content/uploads/2011/12/aftermath.jpg" id="background"/>   
<canvas id="tutorial"></canvas>

JavaScript

init();

var lastRender = new Date().getTime();
var context;
var smokeRight = new ParticleEmitter();
var smokeLeft = new ParticleEmitter();
var CANVAS_WIDTH = 960;
var CANVAS_HEIGHT = 640;
// only redraw minimimum rectangle
var dirtyLeft = 0;
var dirtyTop = 0;
var dirtyRight = CANVAS_WIDTH;
var dirtyBottom = CANVAS_HEIGHT;
var windVelocity = 0.01;
var count = 0;

function init() {
    var canvas = document.getElementById('tutorial');
    if (canvas.getContext) {
        context = canvas.getContext('2d');
    } else {
        return;
    }
    var imgBack = document.getElementById('background');
    // make canvas same size as background image
    CANVAS_WIDTH = imgBack.width;
    CANVAS_HEIGHT = imgBack.height;
    canvas.width = imgBack.width;
    canvas.height = imgBack.height;
    // get absolute position of background image
    var xImage = imgBack.offsetLeft;
    var yImage = imgBack.offsetTop;
    var elem = imgBack.offsetParent;
    while (elem) {
        xImage += elem.offsetLeft;
        yImage += elem.offsetTop;
        elem = elem.offsetParent;
    }
    // position canvas on top of background
    canvas.style.position = 'absolute';
    canvas.style.left = xImage + "px";
    canvas.style.top = yImage + "px";
    var imgSmoke = new Image();
    imgSmoke.src = 'http://astronautz.com/wordpress/wp-content/uploads/2011/12/puffBlack.png';
    // http://fc06.deviantart.net/fs70/f/2012/164/3/0/smoke_png_by_dbszabo1-d53bpar.png
    imgSmoke.onload = function() {
        smokeRight.init(.9, .531, 20, imgSmoke);
        smokeLeft.m_alpha = 0.3;
        smokeLeft.init(.322, .453, 30, imgSmoke);
        requestAnimFrame(render);
    };
}

function ParticleEmitter() {
    this.m_x;
    this.m_y;
    this.m_dieRate;
    this.m_image;
    this.m_speed = 0.02;
    this.m_alpha = 1.0;

    this.m_listParticle = [];

    // ParticleEmitter().init function
    // xScale = number between 0 and 1. 0 = on left side 1 = on top
    // yScale = number between 0 and 1. 0 = on...