/index.html

## index.html
<html>
  <head>
    <title>Timmcd's Canvas Tests</title>
    <script type="text/javascript" src="games/jquery-1.3.2.js"></script>
    <script type="text/javascript" src="games/test.js">
    </script>
    <style type="text/css">
      canvas { border: 1px solid black; }
    </style>
  </head>
  <body onload="init();">
    <canvas id="canvas" width="300" height="300"></canvas>
  </body>
</html>


## test.js
var WIDTH;
var HEIGHT;
var ctx;
var guy;
var angle;
var canvasMinX;
var canvasMaxX;
var canvasMinY;
var canvasMaxY;

function init() {
    ctx = $('#canvas')[0].getContext("2d");
    WIDTH = $("#canvas").width();
    HEIGHT = $("#canvas").height();
    guy = new Image();
    guy.src = 'images/tdsguy.png';
    angle = 1;
    $('#canvas')[0].onmousemove = function(evt){
        x = evt.pageX
        y = evt.pageY
    }
    return setInterval(draw, 10);
}

function circle(x,y,r) {
    ctx.beginPath();
    ctx.arc(x, y, r, 0, Math.PI*2, true);
    ctx.closePath();
    ctx.fill();
}

function rect(x,y,w,h) {
    ctx.beginPath();
    ctx.rect(x,y,w,h);
    ctx.closePath();
    ctx.fill();
}

function clear() {
    ctx.clearRect(0, 0, WIDTH, HEIGHT);
}

function drawGuy() {
    ctx.translate(x,y);
    ctx.rotate(angle * Math.PI / 180);
    ctx.translate(-x,-y);
    ctx.drawImage(guy, x, y);
}

//END LIBRARY CODE

function draw() {
    clear();
    drawGuy();
    //    if ((angle + 1) = 181) {
    //  angle = 0
    //      } else {
    //          angle = angle + 1;
    //    }
}

init();
	<html>
	<head>
	<title>Timmcd's Canvas Tests</title>
	<script type="text/javascript" src="games/jquery-1.3.2.js"></script>
	<script type="text/javascript" src="games/test.js">
	</script>
	<style type="text/css">
	canvas { border: 1px solid black; }
	</style>
	</head>
	<body onload="init();">
	<canvas id="canvas" width="300" height="300"></canvas>
	</body>
	</html>
	var WIDTH;
	var HEIGHT;
	var ctx;
	var guy;
	var angle;
	var canvasMinX;
	var canvasMaxX;
	var canvasMinY;
	var canvasMaxY;

	function init() {
	ctx = $('#canvas')[0].getContext("2d");
	WIDTH = $("#canvas").width();
	HEIGHT = $("#canvas").height();
	guy = new Image();
	guy.src = 'images/tdsguy.png';
	angle = 1;
	$('#canvas')[0].onmousemove = function(evt){
	x = evt.pageX
	y = evt.pageY
	}
	return setInterval(draw, 10);
	}

	function circle(x,y,r) {
	ctx.beginPath();
	ctx.arc(x, y, r, 0, Math.PI*2, true);
	ctx.closePath();
	ctx.fill();
	}

	function rect(x,y,w,h) {
	ctx.beginPath();
	ctx.rect(x,y,w,h);
	ctx.closePath();
	ctx.fill();
	}

	function clear() {
	ctx.clearRect(0, 0, WIDTH, HEIGHT);
	}

	function drawGuy() {
	ctx.translate(x,y);
	ctx.rotate(angle * Math.PI / 180);
	ctx.translate(-x,-y);
	ctx.drawImage(guy, x, y);
	}

	//END LIBRARY CODE

	function draw() {
	clear();
	drawGuy();
	// if ((angle + 1) = 181) {
	// angle = 0
	// } else {
	// angle = angle + 1;
	// }
	}

	init();