<!DOCTYPE html>
<html>
<head>
<title>Cubo Anmiado V2</title>
</head>
<script type="text/javascript">
window.onload = function () {
var x = 200;
var y = 300;
var x2 = 80;
var y2 = 80;
var c = document.getElementById('canvas');
var ctx = c.getContext('2d');
dibujar(x,y,x2,y2);
function dibujar(x,y,x2,y2){
ctx.fillStyle="green";
ctx.fillRect(x,y,x2,y2);
ctx.fill();
}
c.onclick = function(e){
if (e.pageY - c.offsetTop >= y &&
e.pageY - c.offsetTop < (y + y2) &&
e.pageX - c.offsetLeft >= x &&
e.pageX - c.offsetLeft < (x + x2)){
mover();
}
}
function mover(){
if( y > 0 ){
y--;
setTimeout(mover,10);
}
limpiar();
dibujar(x,y,x2,y2);
}
function limpiar(){
ctx.clearRect(0,0,c.width,c.height);
}
}
</script>
<body>
<canvas id="canvas" width="800" height="600"></canvas>
</body>
</html>