How do I get this HTML canvas animation to appear on top of my image?

Question

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).

Here's a codepen link to the code:

http://codepen.io/anon/pen/ZbZREp

*************** HTML *************************

None

************** CSS ***************************

body{
  background:#000;
  width: 100%;
  height: 100%;
  overflow:hidden;
}

****************JS ****************************

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 < 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 > 500) particles.shift();

 c.globalAlpha = 2;
 c.drawImage(background,0,0);
 c.fillRect(0,0,w,h);



 for(var i = 0; i < particles.length; i++)
 {
   particles[i].update();
 }
};

setInterval(draw, 1000/60);

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.

What am I doing wrong here?

Answer 1

Just draw the background image before you draw the particles:

 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 < 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); // draw the background image before you draw the particles c.drawImage(background,0,0); while(particles.length > 500) particles.shift(); for(var i = 0; i < particles.length; i++) { particles[i].update(); } }; setInterval(draw, 1000/60); 

 body{ background-color: black; } canvas{border:1px solid red; }