How can in achieve full background smoke effect in Javascript or CSS

Question

im trying to use this code:

http://codepen.io/MIML/pen/iBKyC

canvas {
    position:absolute;
    margin-left : 50%;
    left: -150px;
}

To put some smoke at the bottom of my page, but im searching how can i put it using 100% width!

You know, all the bottom of my page, spreads smoke.

Thanks.

Answer 1

Cool find! Usually we don't write code for you, but this one's on me.

First, change the CSS code to this:

canvas {
  position: absolute;
  width: 100%; height: 200px;
  bottom: 0px; left: 0px;
}

This will span the canvas across the entire page, but there won't be enough "smoke".

To add more smoke, replace the spawn() function with this!

function spawn() {
    if(new Date().getTime() > lastTime + minSpawnTime) {
      lastTime = new Date().getTime();
      parts.push(new smoke(0, emitterY));
      parts.push(new smoke(50, emitterY));
      parts.push(new smoke(100, emitterY));
      parts.push(new smoke(150, emitterY));
      parts.push(new smoke(200, emitterY));
      parts.push(new smoke(250, emitterY));
      parts.push(new smoke(300, emitterY));
    }
}

Hope you enjoy!