Search code examples
javascriptjqueryanimationcanvasparticles

How to hide particle effect (Circles) until .png that it animates is loaded?

I'm currently using a snippet I got from this JS fiddle I found on google. It works really well with my project and I already have it live on my site.

However. I have a slower connection -- Although I'm not sure if that's why this occurs, but i see "Neon blue circles" floating around the screen displaying the "particle's" before it loads in the .PNG that is animated as a smoke effect.

My question: Is there anyway I can hide these circles? Or possible delay the effect until the .PNG is loaded?

I may be making this more complicated that it sounds. I'm not too great with JS but i can dabble a bit. Any help is much appreciated!

DEMO

#myCanvas{
    background:black;
    }
Solution

  • You can remove/comment out these lines:

        this.context.beginPath();
    this.context.arc(this.x, this.y, this.radius, 0, 2 * Math.PI, false);
    this.context.fillStyle = "rgba(0, 255, 255, 1)";
    this.context.fill();
    this.context.closePath();

    This essentially draws a single circle.