Эффект дыма

Дым из под ракеты

by twobomb three

HTML

<img src="https://t4.ftcdn.net/jpg/00/68/55/69/500_F_68556952_3ZCVNJziGArX2HJXO1Ycsm8xvGWH5LJz.jpg" >

CSS

img{
    position:absolute;
    left:0px;
    top:0px;
    background:linear-gradient(rgba(0,0,0,0) 100 rgba(255,255,255,255) );
  }
  #smoke{
            position: absolute;
            left:-750px;
            top:180px;
        }

JavaScript

var canvas, ctxW = 2000,
                ctxH = 200,
                ctx;
        Number.prototype.toRadian = function(){
            return this * (Math.PI/180);
        }
        window.onload = function() {
            canvas = document.createElement("canvas");
            canvas.id = "smoke";
            canvas.width = ctxW;
            canvas.height = ctxH;
            document.body.appendChild(canvas);
            ctx = canvas.getContext("2d");
            handler();
        }
        
            var source = {
                x: ctxW/2,
                y: 50,
                balls: [],
                maxBalls: 400,
                handler: function(){
                    
                    while(this.balls.length < this.maxBalls){
                        this.balls.push(new ball(this.x,this.y,rnd(10,40),"rgba(255,255,255,"+rnd(.5,1)+")"));
                    }
                    for(var i = 0; i < this.balls.length; i++){
                        if(this.balls[i].y - this.balls[i].r > ctxH || this.balls[i].x + this.balls[i].r < 0 ||  this.balls[i].x - this.balls[i].r > ctxW)
                            this.balls.splice(i--,1);
                        else
                            this.balls[i].draw();
                    }
                }
            };
function handler() {
                ctx.clearRect(0, 0, ctxW, ctxH);
                source.handler();
                requestAnimationFrame(handler);
            }
        
            function rnd(min,max){
                return Math.random()*(max - min)+min;
            }
            function ball(x,y,r,color) {
                this.x = x;
                this.y = y;
                this.r = r;
                this.angle = rnd(85,-85);
                this.speed = rnd(3,10);
                
                this.color = color;
                this.draw = function() {
                    ctx.fillStyle = this.color;
                    ctx.beginPath();
                    ctx.arc(this.x,...