HTML5 Canvas Exploding Dots

Description

Use this code to add a cool animated effect to your HTML5 canvas where dots appear to explode across the canvas.

<!DOCTYPE HTML>
<html>
  <head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
  	<canvas id="canvas" width="400" height="400"></canvas>

$(function() {
    var points = [], numPoints = 100, i, canvas, context, width, height, gravity = 0.1, emitter;
    
    canvas = $("#canvas")[0];
    width = canvas.width;
    height = canvas.height;
    context = canvas.getContext("2d");
    
    emitter = {x:width / 2, y:height};
    
    function initPoint(p) {
        p.x = emitter.x;
        p.y = emitter.y;
        p.vx = Math.random() * 5 - 2;
        p.vy = Math.random() * -6 - 3;
        p.radius = Math.random() * 4 + 1;
    }
    
    function update() {
        var i, point, len = points.length;
        for(i = 0; i < len; i += 1) {
            point = points[i];
            point.vy += gravity;
            point.x += point.vx;
            point.y += point.vy;
            if(point.x > width ||
               point.x < 0 ||
               point.y > height ||
               point.y < 0) {
                initPoint(point);
            }
        }
    }
    
    function draw() {
        var i, point, len = points.length;
        context.clearRect(0, 0, width, height);
        for(i = 0; i < len; i += 1) {
            point = points[i];
            context.beginPath();
            context.arc(point.x, point.y, point.radius, 0, Math.PI * 2, false);
            context.fillStyle = "#9cf000";
            context.fill();
            
        }
    }
    
    function addPoint() {
        var point;
        if(points.length < numPoints) {
            point = {};
            initPoint(point);
            points.push(point);
        }
    }
    
    setInterval(function() {
        addPoint();
        update();
        draw();
    }, 1000/24);
});

</script>
  </body>
</html>

Canvas Cheat Sheet

HTML5 Canvas Exploding Dots

Description

Demo