Hi all,
mousedown and mouseup is not working in canvas
index.html

Code:
<body width="100%" height="100%">   
<header>         	
<h1>Drawing in Canvas</h1>      
</header>     
<canvas id="game" width="768" height="400">Sorry, your web browser does not support Canvas content.
</canvas>     
<script src="js/jquery-1.10.2.min.js"></script>     
<script src="js/logic.js"></script> </body>
logic.js

Code:
			
var untangleGame={
circle: [], 				
thinLineThickness: 1, 				
lines: [] 			
}; 			

function Circle(x,y,radius){ 				this.x=x; 				
this.y=y; 				
this.radius=radius; 			
} 			
function Line(startPoint,endPoint,thickness){ 				this.startPoint=startPoint; 				this.endPoint=endPoint; 				this.thickness=thickness; 			
} 			
function drawcircle(ctx,x,y,radius){ 				ctx.fillStyle="rgba(200,200,100,.9)"; 				ctx.beginPath(); 				ctx.arc(x,y,radius,0,Math.PI*2,true); 				ctx.closePath(); 				
ctx.fill(); 			
} 			
function connectCircles(){ 				untangleGame.lines.length = 0; 				
for(var i=0;i<untangleGame.circle.length;i++){ 					var startPoint=untangleGame.circle[i]; 					for(var j=0;j<i;j++){ 						
var endPoint=untangleGame.circle[j]; 						untangleGame.lines.push(new Line(startPoint,endPoint,untangleGame.thinLineThickness)); 					} 				
} 			
} 			
function drawLine(ctx,x1,y1,x2,y2,thickness){ 				ctx.beginPath(); 				ctx.moveTo(x1,y1); 				ctx.lineTo(x2,y2); 				ctx.lineWidth=thickness; 				ctx.strokeStyle="#cfc"; 				ctx.stroke(); 			} 			
function clear(ctx){ 				ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height); 			} 			
$(function(){ 				
var canvas=document.getElementById('game'); 				var ctx=canvas.getContext('2d');  				
var circleRadius=10; 				
var width=canvas.width; 				
var height=canvas.height;  				
var circlesCount=5;  				
for(var i=0;i<circlesCount;i++){ 					
var x=Math.random()*width; 					
var y=Math.random()*height; 					drawcircle(ctx,x,y,circleRadius); 					untangleGame.circle.push(new Circle(x,y,circleRadius)); 				} 				
connectCircles(); 				$("#game").mousedown(function(e){ 					var canvasPosition=$(this).offset(); 					var mouseX=e.layerX || 0; 					
var mouseY=e.layerY || 0;  					
for(var i=0;i<untangleGame.circle.length;i++){ 					var circleX=untangleGame.circle[i].x; 						var circleY=untangleGame.circle[i].y; 						var radius=untangleGame.circle[i].radius; 					if(Math.pow(mouseX-circleX,2)+Math.pow(mouseY-circleY,2)<Math.pow(untangleGame.circleRadius,2)) 					{ 						untangleGame.targetCircle=i; 						break; 					} 				} 				});  				$("#game").mousemove(function(e){ 					if(untangleGame.targetCircle !== undefined){ 						var canvasPosition=$(this).offset(); 						var mouseX=e.layerX || 0; 						var mouseY=e.layerY || 0; 						var radius=untangleGame.circle[untangleGame.targetCircle].radius; 						untangleGame.circle[untangleGame.targetCircle]=new Circle(mouseX,mouseY,radius); 					} 					connectCircles(); 				}); 				$("#game").mouseup(function(e){ 					untangleGame.targetCircle=undefined; 				}); 				setInterval(gameloop,30); 			}); 			function gameloop(){ 				var canvas=document.getElementById('game'); 				var ctx=canvas.getContext('2d');  				clear(ctx); 				for(var i=0;i<untangleGame.lines.length;i++){ 					var line=untangleGame.lines[i]; 					var startPoint=line.startPoint; 					var endPoint=line.endPoint; 					var thickness=line.thickness; 					drawLine(ctx,startPoint.x,startPoint.y,endPoint.x,endPoint.y,thickness); 				} 				for(var i=0;i<untangleGame.circle.length;i++){ 					var circle=untangleGame.circle[i]; 					drawcircle(ctx,circle.x,circle.y,circle.radius); 				} 			}
style.css

Code:
canvas {     background: #333; }