Interactive Smoke Effect With JavaScript and Canvas – smoke.js

Category: Animation , Javascript | September 14, 2018
Author: bijection
Views Total: 8,794
Official Page: Go to website
Last Update: September 14, 2018
License: MIT


Interactive Smoke Effect With JavaScript and Canvas – smoke.js


smoke.js is a fancy JavaScript library which allows to render interactive, realistic smoke animations using HTML5 canvas and a little JavaScript.

How to use it:

Download and place the smoke.js JavaScript file into your HTML page where needed.

<script src="smoke.js"></script>

Create an html5 canvas element on which you want to apply the smoke animation.

<canvas id="canvas"></canvas>

Create the smoke animation.

var canvas = document.getElementById('canvas')
var ctx = canvas.getContext('2d')
canvas.width = innerWidth
canvas.height = innerHeight
// smokemachine(context, [r,g,b])
var demo = smokemachine(ctx, [54, 16.8, 18.2])

Start the animation.


Stop the animation.


Add a new smoke animation.

// addsmoke(x,y,numberofparticles)
// redraw the smoke animaion after 2 seconds

Make the smoke animation react to your mouse move.

onmousemove = function (e) {
  var x = e.clientX
  var y = e.clientY
  var n = .5
  var t = Math.floor(Math.random() * 200) + 3800
  party.addsmoke(x, y, n, t)



  • Fix global variable name usage in function

You Might Be Interested In:

2 thoughts on “Interactive Smoke Effect With JavaScript and Canvas – smoke.js

Leave a Reply