Popping

by Aqilah Misuary

HTML

<div class="canvas2"><canvas id="canvas2" width="845" height="523"></canvas></div>

CSS

#canvas2 {
    background-color: black;
}

JavaScript

// requestAnim shim layer by Paul Irish
    window.requestAnimFrame = (function(){
      return  window.requestAnimationFrame       || 
              window.webkitRequestAnimationFrame || 
              window.mozRequestAnimationFrame    || 
              window.oRequestAnimationFrame      || 
              window.msRequestAnimationFrame     || 
              function(/* function */ callback, /* DOMElement */ element){
                window.setTimeout(callback, 1000 / 60);
              };
    })();
  

// example code from mr doob : http://mrdoob.com/lab/javascript/requestanimationframe/

//var canvas, context;
var canvas2 = document.getElementById('canvas2');
var context2 = canvas2.getContext('2d');

canvas2.width = 845;
canvas2.height = 523;

//init();

//function init() {

    //canvas = document.createElement( 'canvas' );
    //canvas2.width = 512;
    //canvas2.height = 512;

    //context = canvas.getContext( '2d' );
    //document.body.appendChild( canvas );

//}

 function getRandomColor() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
    
}

function clear() {
 context2.fillStyle = 'black';
 context2.fillRect(0,0,canvas2.width,canvas2.height);
}

function animate() {
    id = requestAnimFrame(animate);
    draw();
    pop();
}

function stopAnimate(){
  clear();
  cancelAnimationFrame(id);
}

function draw() {
    context2.clearRect(0,0, canvas2.width, canvas2.height);
    
    var x = Math.random() * canvas2.height;
    var y = Math.random() * canvas2.width;
  
    context2.fillStyle = getRandomColor();
    context2.beginPath();
    context2.arc( x, y, 50, 0, Math.PI * 2, true );
    context2.closePath();
    context2.fill();

}

canvas2.addEventListener("mouseover",function(e){
    animate();
});

canvas2.addEventListener("mouseout",function(e){
    stopAnimate();
});

var audioContext = new(AudioContext ||...