HTML5 Canvas steam effect not displaying correctly without a canvas fill
<p>I looking to have my Canvas steam effect to overlay the rest of my page content, but if I don't give the canvas a fill it displays the steam in a posterised way. </p>

<p>Un-commenting lines 24 &amp; 25 will fill the canvas and the steam displays as expected.</p>

<pre><code>c.fillStyle = '#000';
c.fillRect(0,0,w,h);
</code></pre>

<p>Full demo on snippet below.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var canvas = document.createElement('canvas');
var w = canvas.width = 800;
var h = canvas.height = 700;
var c = canvas.getContext('2d');
var img = new Image();
img.src = "http://wightfield.com/_temp/smoke_600-60.png";
var position = {x : 450, y : 410};
var mugPosition = {x : w/3, y : 500};

document.body.appendChild(canvas);

var particles = [];
var random = function(min, max){
  return Math.random()*(max-min)*min;
};

var draw = function(){
  position.x;
  position.y; 
  var p = new Particle(position.x, position.y);
  particles.push(p);
  while(particles.length &gt; 500) particles.shift();
  
  //c.fillStyle = '#000';
  //c.fillRect(0,0,w,h);

  for(var i = 0; i &lt; particles.length; i++)
  {
    particles[i].update();
  }
};
// generates the smoke particles
function Particle(x, y){
  this.x = x;
  this.y = y;
  this.velX = (random(1, 10)-5)/10;
  // distance of vertical travel
  this.velY = -9;
  this.size = random(3, 6)/10;
  this.alpha = 0.4;
  this.update = function(){
    this.y += this.velY;
    this.x += this.velX;
    this.velY *= 0.99;
    if(this.alpha &lt; 0)
      this.alpha = 0;
    c.globalAlpha = this.alpha;
    c.save();
    c.translate(this.x, this.y);
    c.scale(this.size, this.size);
    
    c.drawImage(img, -img.width/2, -img.height/2);
    c.restore();
    this.alpha *= 0.90;
    this.size += 0.015;//
  };
}

setInterval(draw, 800/16);</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>body{
  background:green;
}
canvas {
  border: 1px dotted black;
}</code></pre>
</div>
</div>
</p>

<p>Is it possible to achieve the steam effect with no canvas fill color?</p>