Realistic smoke effect using html canvas.
(Note that the used example is highly degraded when using GIF format. The real effect is nearly perfect.)
<canvas id="canvas"></canvas> var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
canvas.width = 1500;
canvas.height = 1000;
var smoke = new Smoke(context, [80, 80, 80]); // context canvas, smoke color
smoke.start();
smoke.step(500);
addSmoke(smoke);
// Make run smoke run indefinitely
function addSmoke() {
smoke.addSmoke(400, 500, 2);
smoke.addSmoke(600, 500, 3);
setTimeout(() => {
addSmoke();
}, 1000);
}