Edit in JSFiddle

window.requestAnimFrame = (function(){
    return  window.requestAnimationFrame   ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame    ||
        window.oRequestAnimationFrame      ||
        window.msRequestAnimationFrame     ||
        function(callback){
            window.setTimeout(callback, 1000 / 60);
        };
})();


var canvas = document.querySelector('#canvas-container');
var ctx = canvas.getContext('2d');




var Particle = function(scale, color, speed) {
    this.scale = scale; //大きさ
    this.color = color; //色
    this.speed = speed; //速度
    this.position = {   // 位置
        x: 100,
        y: 100
    };
};

Particle.prototype.draw = function() {
    ctx.beginPath();
    ctx.arc(this.position.x, this.position.y, this.scale, 0, 2*Math.PI, false);
    ctx.fillStyle = this.color;
    ctx.fill();
};

var density = 100;  //パーティクルの密度
var particles = []; //パーティクルをまとめる配列
var colors = ['#D0A000', '#6DD0A5', '#E084C5'];

for (var i=0; i<density; i++) {
    var color = colors[~~(Math.random()*3)];
    var scale = ~~(Math.random()*(8-3))+3;
    particles[i] = new Particle(scale, color, scale/2);
    particles[i].position.x = Math.random()*canvas.width;
    particles[i].position.y = Math.random()*canvas.height;
    particles[i].draw();
}

loop();
function loop() {
    requestAnimFrame(loop);
    // 描画をクリアー
    ctx.clearRect(0,0, ctx.canvas.width, ctx.canvas.height);
    
    for (var i=0; i<density; i++) {
        particles[i].position.x += particles[i].speed;
        particles[i].draw();
        
        if (particles[i].position.x > canvas.width) particles[i].position.x = -30;
    }
}

<canvas id="canvas-container" width="650" height="300"></canvas>