HTML 5 Canvas

A simple canvas animation

<html>
 <head>
 <script src="http://code.jquery.com/jquery-latest.min.js"
 type="text/javascript"></script>
 </head>
 <body>
 <script type="text/javascript">
 var CANVAS_WIDTH = 480;
 var CANVAS_HEIGHT = 480;
 var FPS = 30;
 var canvasCenterX = CANVAS_WIDTH / 2;
 var canvasCenterY = CANVAS_HEIGHT / 2;
 var mouse =
 {
 x:0,
 y:0
 };
 var isPlaying = false;
 var canvasElement = $("<canvas width='" + CANVAS_WIDTH +
 "' height='" + CANVAS_HEIGHT + "'></canvas");
 var canvas = canvasElement.get(0).getContext("2d");
 canvasElement.appendTo('body');
 canvasElement.get(0).addEventListener("mousemove", mouseMove, false);
 function mouseMove(e)
 {
 mosuestop = 0;
 if (e.pageX)
 {
 mouse.x = e.pageX;
 }
 else if (e.clientX)
 {
 mouse.x = e.clientX + document.body.scrollLeft
 + document.documentElement.scrollLeft;
 }
 mouse.x = mouse.x - canvasElement.get(0).offsetLeft;
 if (e.pageY)
 {
 mouse.y = e.pageY;
 }
 else if (e.clientY)
 {
 mouse.y = e.clientY + document.body.scrollTop
 + document.documentElement.scrollTop;
 }
 mouse.y = mouse.y - canvasElement.get(0).offsetTop;
 last_mousex = mouse.x;
 last_mousey = mouse.y;
 }
 var arrow =
 {
 strokeColor: "#8ED6FF",
 fillColor: "#0000ff",
 x: -50,
 y: -25,
 _radians:0,
 centerX: 0,
 centerY: 0,
 mouse: {},
 _dx:0,
 _dy:0,
 update: function()
 {

this._dx = mouse.x - this.centerX;
 this._dy = mouse.y - this.centerY;
 this._radians = Math.atan2(this._dy,this._dx);
 $('#textbox').html('X =>'+this._dx+' Y =>'+this._dy+'R =>'+this._radians);
 },
 draw: function()
 {
 canvas.save();
 canvas.translate(this.centerX, this.centerY);
 canvas.rotate(this._radians);
 canvas.beginPath();
 canvas.moveTo(this.x, this.y);
 canvas.lineTo(this.x + 50 , this.y);
 canvas.lineTo(this.x + 50, this.y - 25);
 canvas.lineTo(this.x + 100, this.y + 25);
 canvas.lineTo(this.x + 50, this.y + 75);
 canvas.lineTo(this.x + 50, this.y + 50);
 canvas.lineTo(this.x, this.y + 50);
 canvas.lineTo(this.x, this.y);
 canvas.fillStyle = this.strokeColor;
 canvas.fill();
 canvas.strokeStyle = this.fillColor;
 canvas.stroke();
 canvas.restore();
 },
 /* move_stop: function()
 {
 if((mouse.x == last_mousex) && (mouse.y == last_mousey))
 {
 mosuestop =1;
 alert("start move");
 ///////
 canvas.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
 canvas.strokeStyle = "red";
 canvas.strokeRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
 canvas.fillStyle = "#ccc";
 canvas.fillRect(.5, .5, CANVAS_WIDTH-1, CANVAS_HEIGHT-1);
 canvas.save();
 canvas.translate(mouse.x, mouse.y);
 canvas.rotate(this._radians);
 canvas.beginPath();
 canvas.moveTo(mouse.x, mouse.y);
 canvas.lineTo(mouse.x + 50 , mouse.y);
 canvas.lineTo(mouse.x + 50, mouse.y - 25);
 canvas.lineTo(mouse.x + 100, mouse.y + 25);
 canvas.lineTo(mouse.x + 50, mouse.y + 75);
 canvas.lineTo(mouse.x + 50, mouse.y + 50);
 canvas.lineTo(mouse.x, mouse.y + 50);
 canvas.lineTo(mouse.x, mouse.y);
 canvas.fillStyle = this.strokeColor;
 canvas.fill();
 canvas.strokeStyle = this.fillColor;
 canvas.stroke();
 canvas.restore();

/////////////
 last_mousex = 0;
 last_mousey = 0;
 }
 },*/
 move_update: function()
 {
 this.centerX = mouse.x;
 this.centerY = mouse.y;
 }
 };
 // Draw the views
 function draw()
 {
 canvas.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
 canvas.strokeStyle = "red";
 canvas.strokeRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
 canvas.fillStyle = "#ccc";
 canvas.fillRect(.5, .5, CANVAS_WIDTH-1, CANVAS_HEIGHT-1);
 arrow.draw();
 }
 $(function()
 {
 arrow.centerX = canvasCenterX;
 arrow.centerY = canvasCenterY;
 arrow.mouse = mouse;
 mousestop = 0;
 setInterval(function()
 {
 if(mousestop == 0)
 {
 arrow.update();
 draw();
 }
 }, 1000/FPS);
 setInterval(function()
 {
 arrow.move_update();
 //arrow.move_stop();
 arrow.draw();
 }, 50000/FPS);
 });
 </script>
 <span id="textbox"></span>
 </body></html>