TEST
HTML
<canvas id="canvas" height="500px" width="500px"></canvas>
JavaScript
function Shape(x, y) {
var obj = Object();
obj.x = x;
obj.y = y;
return obj;
}
function Rectangle(x, y, height, width, color) {
var obj = Shape(x, y);
obj.height = height;
obj.width = width;
obj.color = color;
return obj;
}
function draw(objArray, context) {
for (var j=0;j<100;j++)
{
context.clearRect(0,0,500,500);
for (var i = 0; i < objArray.length; i++) {
objArray[i].x=j;
objArray[i].y=j;
objArray[i].width=objArray[i].width+j;
objArray[i].height=objArray[i].height+j;
context.fillStyle = objArray[i].color;
context.fillRect(objArray[i].x, objArray[i].y, objArray[i].width, objArray[i].height);
}
}
}
function refresh() {
context.clearRect(0, 0, 500, 500);
draw(drawObj, context);
setTimeout(refresh, 10000);
}
var drawObj = [];
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
drawObj.push(new Rectangle("20", "20", "30", "40", "#3A5BCD"));
drawObj.push(new Rectangle("50", "50", "100", "30", "#EF2B36"));
refresh(drawObj, context);