elisiondesign / smoke-effect

Realistic smoke effect using html canvas

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