Smoke Effect

Realistic smoke effect using html canvas.

Example

(Note that the used example is highly degraded when using GIF format. The real effect is nearly perfect.)

Usage

<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);
    }