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();
}