var?canvasWidth=800;
var?canvasHeight=canvasWidth;
var?isMouseDown=false;
var?canvas=document.getElementById("canvas");
var?context=canvas.getContext("2d");
canvas.width=canvasWidth;
canvas.height=canvasHeight;
drawGrid();
canvas.onmousedown=function(e){
e.preventDefault();
isMouseDown=true;
//console.log("mouse?down");
alert(e.clientX+","+e.clientY);
}
canvas.onmouseup=function(e){
e.preventDefault();
isMouseDown=false;
//console.log("mouse?up");
}
canvas.onmouseout=function(e){
e.preventDefault();
isMouseDown=false;
//console.log("mouse?out");
}
canvas.onmousemove=function(e){
e.preventDefault();
if(isMouseDown){
//console.log("mouse?move");
//draw
}
}
function?drawGrid(){
context.save();
context.strokeStyle="red";
context.beginPath();
context.moveTo(3,3);
context.lineTo(canvasWidth-3,3);
context.lineTo(canvasWidth-3,canvasHeight-3);
context.lineTo(3,canvasHeight-3);
context.closePath();
context.lineWidth=6;
context.stroke();
context.beginPath();
context.moveTo(0,0);
context.lineTo(canvasWidth,canvasHeight);
context.moveTo(canvasWidth,0);
context.lineTo(0,canvasHeight);
context.moveTo(canvasWidth/2,0);
context.lineTo(canvasWidth/2,canvasHeight);
context.moveTo(0,canvasHeight/2);
context.lineTo(canvasWidth,canvasHeight/2);
context.lineWidth=1;
context.stroke();
context.restore();
}