Fixed tracking issue after resize and added conditionals for IE.

river.js

@@ -5,6 +5,18 @@ $(document).ready(function()
 	var cheater = false;
 	var pi2x    = Math.PI * 2;
 
+	var userAgent = navigator.userAgent.toLowerCase();
+
+	var isIE      = userAgent.indexOf('msie') != -1;
+	var isIphone  = userAgent.indexOf('iphone') != -1 || userAgent.indexOf('ipad') != -1
+	var isAndroid = userAgent.indexOf('android') != -1;
+
+	if (!isIE)
+	{
+		canvas.css('-moz-border-radius',    '20px');
+		canvas.css('-webkit-border-radius', '20px');
+	}
+
 	// In case you ever need to reset the score
 	//localStorage.setItem('high', 0);
 
@@ -23,7 +35,6 @@ $(document).ready(function()
 		var width          = canvas.width();
 		var height         = canvas.height();
 		var middle         = 35;
-		var offset = canvas.attr('offsetLeft');
 		var prevX          = (width / 2) - 6;
 		var wallLeftX      = new Array();
 		var wallLeftY      = new Array();
@@ -35,13 +46,13 @@ $(document).ready(function()
 		var nextRight      = rightX;
 		var previousPaddle = 'left';
 		var nextPaddle     = 'center';
-		var index = 0;
+		var direction      = 'center';
+		var index;
+		var intervals;
 		var min;
 		var max;
 		var turn;
-		var speed = 80;
-		var intervals = 0;
-		var direction = 'center';
+		var speed;
 
 		context.strokeStyle = '#000';
 		context.lineWidth   = '2';
@@ -61,6 +72,8 @@ $(document).ready(function()
 	{
 		if (started == false)
 		{
+			canvas.css('cursor', 'none');
+
 			cheater = $('input:checked').length;
 
 			wallLeftX  = new Array();
@@ -115,10 +128,8 @@ $(document).ready(function()
 	{
 		if (started == true)
 		{
-			canvas.css('cursor', 'move');
 			context.clearRect(prevX, middle, 49, 65);
-
-			prevX = event.clientX - offset - 25;
+			prevX = event.pageX - canvas.position().left - 25;
 			drawKayak();
 		}
 	});
@@ -250,6 +261,8 @@ $(document).ready(function()
 			context.fillStyle = '#000';
 			context.fillText('GAME OVER!', 145, 235);
 			context.fillText('Click to Restart', 100, 255);
+			
+			canvas.css('cursor', 'pointer');
 		}
 	}
 
@@ -347,32 +360,70 @@ $(document).ready(function()
 		}
 
 		context.beginPath();
+
+		if (isIE)
+		{
+			context.moveTo(0, 500);
+			context.lineTo(0, 0);
+		}
+		else
+		{
 			context.moveTo(0, 485);
 			context.lineTo(0, 15);
 			context.arc(15, 15, 15, Math.PI, (Math.PI * 3) / 2, false);
 			context.moveTo(15, 0);
+		}
+
 		context.lineTo(wallLeftX[0], wallLeftY[0]);
 		for (var i in wallLeftX)
 		{
 			context.lineTo(wallLeftX[i], wallLeftY[i]);
 		}
+
+		if (isIE)
+		{
+			context.lineTo(0, 500);
+		}
+		else
+		{
 			context.lineTo(15, 500);
 			context.arc(15, 485, 15, Math.PI / 2, Math.PI, false);
+		}
+
 		context.fillStyle = '#090';
 		context.fill();
 
 		context.beginPath();
+
+		if (isIE)
+		{
+			context.moveTo(400, 500);
+			context.lineTo(400, 0);
+		}
+		else
+		{
 			context.moveTo(400, 485);
 			context.lineTo(400, 15);
 			context.arc(385, 15, 15, pi2x, (Math.PI * 3) / 2, true);
 			context.moveTo(385, 0);
+		}
+
 		context.lineTo(wallRightX[0], wallRightY[0]);
 		for (var i in wallRightX)
 		{
 			context.lineTo(wallRightX[i], wallRightY[i]);
 		}
+
+		if (isIE)
+		{
+			context.lineTo(400, 500);
+		}
+		else
+		{
 			context.lineTo(385, 500);
 			context.arc(385, 485, 15, Math.PI / 2, 0, true);
+		}
+
 		context.fill();
 
 		drawKayak();

styles.css

@@ -65,7 +65,6 @@ canvas
 {
 	background: #39f;
 	cursor: pointer;
-	-moz-border-radius: 20px;
-	-webkit-border-radius: 20px;
+	border: 4px solid #2d3a47;
 	float: right;
 }