title: How do I get this HTML canvas animation to appear on top of my image?
body: <p>new to stack and coding, trying to create a simplified detective game (definitely have bitten off more than I can chew, but I decided to give it a shot anyway).</p>
  
  <p>Here's a codepen link to the code:</p>
  
  <p><a href="http://codepen.io/anon/pen/ZbZREp" rel="nofollow">http://codepen.io/anon/pen/ZbZREp</a></p>
  
  <p>*************** HTML *************************</p>
  
  <p>None</p>
  
  <p>************** CSS ***************************</p>
  
  <pre><code>body{
    background:#000;
    width: 100%;
    height: 100%;
    overflow:hidden;
  }
  </code></pre>
  
  <p>****************JS ****************************</p>
  
  <pre><code>var canvas = document.createElement('canvas');
  var w = canvas.width = 800,
     h = canvas.height = 600;
  var c = canvas.getContext('2d');
  
  var img = new Image();
  img.src = 'http://oi41.tinypic.com/4i2aso.jpg';
  
  var background = new Image();
  background.src = "https://i2.wp.com/i2.listal.com/image/2669447/500full.jpg";
  
  
  
  var position = {x : w/3.2, y : h/2.5};
  
  document.body.appendChild(canvas);
  
  var particles = [];
  var random = function(min, max){
   return Math.random()*(max-min)*min;
  };
  
  /*canvas.onmousemove = function(e){
   position.x = e.offsetX;
   position.y = e.offsetY;
  };*/
  function Particle(x, y){
   this.x = x;
   this.y = y;
   this.velY = -2;
   this.velX = (random(1, 10)-5)/10;
   this.size = random(3, 5)/10;
   this.alpha = 1;
   this.update = function(){
     c.drawImage(background,0,0);
     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.96;
     this.size += 0.02;//
   };
  }
  
  var draw = function(){
   var p = new Particle(position.x, position.y);
   particles.push(p);
  
   while(particles.length &gt; 500) particles.shift();
  
   c.globalAlpha = 2;
   c.drawImage(background,0,0);
   c.fillRect(0,0,w,h);
  
  
  
   for(var i = 0; i &lt; particles.length; i++)
   {
     particles[i].update();
   }
  };
  
  setInterval(draw, 1000/60);
  </code></pre>
  
  <p>On codepen, if you comment out line 35 in the JS section, you'll see that there's a smoke animation BEHIND the detective's image (found it on codepen of course and thought it would make for a cool smoking animation). I was able to figure out how to get the detective image into the canvas, but I can't figure out how to get the smoke animation to appear in FRONT of detective's image. I've tried several methods including setting a Javascript picture onLoad, but out of all the methods, this is the closest I could get to my intended goal. </p>
  
  <p>What am I doing wrong here?</p>