4

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.

Rodrigo
  • 63
  • 2
  • 9

1 Answers1

4

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!

Aaron Gillion
  • 2,227
  • 3
  • 19
  • 31
  • 1
    Thank you Aaron i try this and it works perfectly, i just delete the height (200px) in the width of the canvas and it works great! Thank you a loooooooot! :) – Rodrigo Mar 25 '16 at 20:07