bellbind/fire.html

## fire.html
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<script src="fire.js"></script>
</head>
<body>
<canvas id="canvas" width="300" height="300" style="background-color: white"
></canvas>
</body>
</html>

## fire.js
;window.addEventListener("load", function () {
    "use strict";
    var canvas = document.getElementById("canvas");
    var c2d = canvas.getContext("2d");

    var Fire = function Fire(x, y, size, sx, sy, reduce) {
        return Object.create(Fire.prototype, {
            x: {value: x, writable: true},
            y: {value: y, writable: true},
            r: {value: size, writable: true},
            size: {value: size},
            sx: {value: sx},
            sy: {value: sy},
            reduce: {value: reduce},
        });
    };
    Fire.prototype.render = function (c2d) {
        if (this.r <= 0) return this;
        var opacity = (0|100*this.r/this.size)/100;
        c2d.save();
        c2d.translate(this.x, this.y);
        var grad = c2d.createRadialGradient(0, 0, 0, 0, 0, this.size);
        grad.addColorStop(0, "hsla(120, 100%, 100%, 1)");
        grad.addColorStop(opacity, "hsla(240, 80%, 50%, " + opacity + ")");
        grad.addColorStop(1, "hsla(360, 60%, 0%, 0)");
        c2d.beginPath();
        c2d.arc(0, 0, this.r, 0, 2 * Math.PI, false);
        c2d.closePath();
        c2d.fillStyle = grad;
        c2d.fill();
        c2d.restore();
        return this;
    };
    Fire.prototype.step = function () {
        this.r -= this.reduce;
        this.x += this.sx;
        this.y += this.sy;
        return this;
    };
    Fire.prototype.isAlive = function () {
        return this.r > 0;
    };

    var max = 300;
    var fires = [];
    var stepFires = function () {
        fires = fires.filter(function (fire) {
            return fire.step().isAlive();
        });
    };
    var fillFires = function () {
        for (var i = 0; i < 10 && fires.length < max; i++) {
            var x = c2d.canvas.width / 2;
            var y = 3 * c2d.canvas.height / 4;
            var size = 10 + (0|Math.random() * 20);
            var sx = -5 + (0|Math.random() * 10);
            var sy = -5 + (0|Math.random() * -10);
            var reduce = 2;
            fires.push(Fire(x, y, size, sx, sy, reduce));
        }
    };
    var renderFires = function (c2d) {
        c2d.clearRect(0, 0, c2d.canvas.width, c2d.canvas.height);
        c2d.fillStyle = "black";
        c2d.fillRect(0, 0, c2d.canvas.width, c2d.canvas.height);
        c2d.globalCompositeOperation = "lighter";
        fires.forEach(function (fire) {
            fire.render(c2d);
        });
    };

    var step = function () {
        fillFires();
        stepFires();
        renderFires(c2d);
    };

    //replacement of setInterval(frame, framems);
    var frameLoop = function (frame, framems, sleepedMax) {
        sleepedMax = sleepedMax || 10;
        var last = Date.now();
        requestAnimationFrame(function callback(now) {
            var times = 0| (now - last) / framems;
            for (var i = 0; i < times && i < sleepedMax; i++) frame();
            last += times * framems;
            requestAnimationFrame(callback);
        });
    };

    frameLoop(step, 1000/15);
}, false);

## frameloop.js
//replacement of setInterval(frame, framems);
var frameLoop = function (frame, framems, sleepedMax) {
    sleepedMax = sleepedMax || 10;
    var last = Date.now();
    requestAnimationFrame(function callback(now) {
        var times = 0| (now - last) / framems;
        for (var i = 0; i < times && i < sleepedMax; i++) frame();
        last += times * framems;
        requestAnimationFrame(callback);
    });
};
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8" />
	<script src="fire.js"></script>
	</head>
	<body>
	<canvas id="canvas" width="300" height="300" style="background-color: white"
	></canvas>
	</body>
	</html>
	;window.addEventListener("load", function () {
	"use strict";
	var canvas = document.getElementById("canvas");
	var c2d = canvas.getContext("2d");

	var Fire = function Fire(x, y, size, sx, sy, reduce) {
	return Object.create(Fire.prototype, {
	x: {value: x, writable: true},
	y: {value: y, writable: true},
	r: {value: size, writable: true},
	size: {value: size},
	sx: {value: sx},
	sy: {value: sy},
	reduce: {value: reduce},
	});
	};
	Fire.prototype.render = function (c2d) {
	if (this.r <= 0) return this;
	var opacity = (0\|100*this.r/this.size)/100;
	c2d.save();
	c2d.translate(this.x, this.y);
	var grad = c2d.createRadialGradient(0, 0, 0, 0, 0, this.size);
	grad.addColorStop(0, "hsla(120, 100%, 100%, 1)");
	grad.addColorStop(opacity, "hsla(240, 80%, 50%, " + opacity + ")");
	grad.addColorStop(1, "hsla(360, 60%, 0%, 0)");
	c2d.beginPath();
	c2d.arc(0, 0, this.r, 0, 2 * Math.PI, false);
	c2d.closePath();
	c2d.fillStyle = grad;
	c2d.fill();
	c2d.restore();
	return this;
	};
	Fire.prototype.step = function () {
	this.r -= this.reduce;
	this.x += this.sx;
	this.y += this.sy;
	return this;
	};
	Fire.prototype.isAlive = function () {
	return this.r > 0;
	};

	var max = 300;
	var fires = [];
	var stepFires = function () {
	fires = fires.filter(function (fire) {
	return fire.step().isAlive();
	});
	};
	var fillFires = function () {
	for (var i = 0; i < 10 && fires.length < max; i++) {
	var x = c2d.canvas.width / 2;
	var y = 3 * c2d.canvas.height / 4;
	var size = 10 + (0\|Math.random() * 20);
	var sx = -5 + (0\|Math.random() * 10);
	var sy = -5 + (0\|Math.random() * -10);
	var reduce = 2;
	fires.push(Fire(x, y, size, sx, sy, reduce));
	}
	};
	var renderFires = function (c2d) {
	c2d.clearRect(0, 0, c2d.canvas.width, c2d.canvas.height);
	c2d.fillStyle = "black";
	c2d.fillRect(0, 0, c2d.canvas.width, c2d.canvas.height);
	c2d.globalCompositeOperation = "lighter";
	fires.forEach(function (fire) {
	fire.render(c2d);
	});
	};

	var step = function () {
	fillFires();
	stepFires();
	renderFires(c2d);
	};

	//replacement of setInterval(frame, framems);
	var frameLoop = function (frame, framems, sleepedMax) {
	sleepedMax = sleepedMax \|\| 10;
	var last = Date.now();
	requestAnimationFrame(function callback(now) {
	var times = 0\| (now - last) / framems;
	for (var i = 0; i < times && i < sleepedMax; i++) frame();
	last += times * framems;
	requestAnimationFrame(callback);
	});
	};

	frameLoop(step, 1000/15);
	}, false);