// Creating variables
var w = 300, h=100;
var angle = 0;
var x = [], y = [];
var x1 = [], y1 = [];

function update() {
    for (var i=0; i<4; ++i){
        x[i] = Math.cos(angle + Math.PI/2*i)/2;
        y[i] = Math.sin(angle + Math.PI/2*i)/2;
        if (i%2==0){x[i]*=w; y[i]*=w;}
        else{x[i]*=h; y[i]*=h;}
    }
    angle += 0.01;
    for (var i = 0; i<4; ++i){
        x1[i] = x[i] + x[(i+1)%4];
        y1[i] = y[i] + y[(i+1)%4];
    }
}

function draw() {
	// This is how you draw a rectangle
    context.beginPath();
    for (var i=0; i<4; ++i){
        context.lineTo(x1[i] + 400, y1[i] + 300);
    }
    context.fill();

}

function keyup(key) {
	// Show the pressed keycode in the console
	console.log("Pressed", key);
}
function mouseup() {
	// Show coordinates of mouse on click
	console.log("Mouse clicked at", mouseX, mouseY);
}