A9 Canvas Animation

HTML canvas animation that responds to mouse click

by scotp71

HTML

<canvas width="400" height="400" id="myCanvas"></canvas>
<br/>

<input type="button" value="Start Anamation" id="begin" />
Click on bars to create new patterns

JavaScript

//Added for iPad to capture click and touch
$('#myCanvas').bind("click tap", function(e){
    var offsetX = $('#myCanvas').offset().left;
    var offsetY = $('#myCanvas').offset().top;
    
   mouseClicked(e.pageX - offsetX , e.pageY - offsetY);
}); 

var timer = -1;
$('#begin').click(function() {
    if (timer == -1)
    {
       timer = window.setInterval(callAnimation, 30);
    }
    else
    {
        window.clearInterval(timer);
        timer = -1;
    }
  });

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

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

var step = 3;

var greenRectangle = 
 {
    x: 0,
    y: 0,
    xstep: 0,
    ystep: 3,
    width: 14,
    height: 175,
    movement: 'y',
    borderWidth: 1,
    borderColor: 'black',
    fillColor: 'green', 
    currentColor: 'green' 
};

var rectangles = new Array();
var firstRect ={
	x: 4,
  y: 223,
  xstep: 0,
  ystep: 3,
  width: 14,
  height: 175,
  movement: 'y',
  borderWidth: 1,
  borderColor: 'black',
  fillColor: 'green', 
  currentColor: 'green' 
}
rectangles.push(firstRect);
for (var v=1; v<28; v++){
	var xoff = firstRect.x + (v*14);
  var yoff = (firstRect.y - (v*5));
	var rect = {
  	x: xoff,
    y: yoff,
    xstep: 0,
    ystep: 3,
    width: 14,
    height: 175,
    movement: 'y',
    borderWidth: 1,
    borderColor: 'black',
    fillColor: 'green', 
    currentColor: 'green' 
  }
  rectangles.push(rect);
}

function drawRectangle(r, c) {
    c.beginPath();
    c.rect(r.x, r.y, r.width, r.height);
    c.fillStyle = r.currentColor;
    c.fill();
    c.lineWidth = r.borderWidth;
    c.strokeStyle = r.borderColor;
    c.stroke();
}

function callAnimation() {
    requestAnimFrame(function...