Javascript: Smoke-Logo effect

StackOverflow https://stackoverflow.com/questions/23525662

Question

I am trying to make a logo to have smoke all over it. I bummped into this jsfiddle: http://jsfiddle.net/jonnyc/Ujz4P/5/ and now I am trying to change it so it goes over a logo however it doesn't want to work.

index.html

<html>
<head>
<title>Smoke</title>
<style>
.container
{
  width: 360px;
  height: 200px;
  border: 2px solid black;
 }
 </style>
 <script type="text/javascript" src="smoke_effect.js"></script>
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
 </head>
 <body>
 <div class="container">
   <img id="smoke-logo" src="images.jpg"/>
 </div>
 </body>
 </html>

and all of the javascript on the left hand side in the jsfiddle I paste it in a docment called smoke_effect.js however I haven't change the code at all I just change the tag from "myCanvas" to "smoke-logo".

Was it helpful?

Solution

I made 2 big changes to your fiddle

I changed the CSS to read:

#myCanvas{
    background:transparent;
}

and the draw function, instead of filling with semi-transparent black, just clears canvas.

// The function to draw the scene
function draw() {
    // Clear the drawing surface and fill it with a black background
    //context.fillStyle = "rgba(0, 0, 0, 0.5)";
    //context.fillRect(0, 0, 400, 400);
    context.clearRect(0,0,400,400);
    // Go through all of the particles and draw them.
    particles.forEach(function(particle) {
        particle.draw();
    });
}

This will allow you to put an image behind the smoke.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top