Untitled

<!DOCTYPE html>
<html>
<head>

<style>
#navigation {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
}

#content {
    margin-left: 200px;
}
h1 ,p{

padding:20px;
box-shadow: inset 0 0 17px 10px #cd0;
text-shadow: 2px 2px 2px #999;

}

h2 {
    padding: 50px;
    background-image: url(paper.gif);
    color: rgba(0,0,0,0.8);
}

a:link {
    color: hsl(36,50%,50%);
}
a:hover {
    color: hsl(36,100%,50%);
}
.note {
    width: 300px;
    height: 300px;
    background: linear-gradient(hsl(0,100%,50%),hsl(60,100%,50%),hsl(120,100%,50%),hsl(180,100%,50%),hsl(240,100%,50%),hsl(300,100%,50%));
	transform: rotate(-10deg);
	transform: skew(20deg,10deg);
	transform: matrix(2,-0.35,0.35,2,0,0);
}


</style>

</head>

<body>
<canvas id="wittykitty" width="200" height="200">
    <!-- Here be fall-back content -->
</canvas>


<script>
//alert("In script");
var canvas = document.querySelector('canvas');
var    ctx = canvas.getContext('2d');

var resize = function () {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
};

window.addEventListener('resize', resize);

window.addEventListener('load', function () {

  resize();

  var pos, vel;
  pos = {
    x: 10,
    y: 10
  };
  vel = {
    x: 1,
    y: 1
  };

  var loop = function () {
	//alert("In loop");
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    pos.x += vel.x;
    pos.y += vel.y;
    if (pos.x < 5 || pos.x > canvas.width - 5 - 50) {
      vel.x *= -1;
    }
    if (pos.y < 5 || pos.y > canvas.height - 5 - 50) {
      vel.y *= -1;
    }
    ctx.fillRect(pos.x - 5, pos.y - 5, 50, 50);
  };

  setInterval(loop, 1000 / 60);
});
</script>

</body>

</html>