Say i want to draw a rectangle on canvas. I want to be able to get the co-ordinates from user\'s mouse. Ideal scenario is user clicks at a point and drags down to another end li
Using this function you can get the mousecoordinates
function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
x: evt.clientX - rect.left,
y: evt.clientY - rect.top
};
}
this function takes in the canvas object and the event. Now you just have to add an eventHandler on mousedown and mouseup and you can get both the locations.
var canvas = document.getElementById('canvasId');
var ctx = canvas.getContext('2d');
var locA, locB;
document.addEventListener('mousedown', function(e) {
e.preventDefault();
locA = getMousePos(canvas, e);
});
document.addEventListener('mouseup', function(e) {
e.preventDefault();
locB = getMousePos(canvas, e);
ctx.fillStyle = '#000000';
ctx.fillRect(locA.x, locA.y, (locB.x - locA.x), (locB.y - locA.y));
});
function source: http://www.html5canvastutorials.com/advanced/html5-canvas-mouse-coordinates/
There are still some problems surrounding canvas coordinates vs document coordinates, but I'm sure you'll be able to fix that.
See this, move you mouse over the square, and witness the awesomeness of Process.js
http://processingjs.org/learning/topic/pattern/
Here's a outline of how to drag-draw a rectangle on canvas:
In mousedown:
In mousemove:
In mouseup:
Here's example code and a Demo: http://jsfiddle.net/m1erickson/6E2yd/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
#canvas{border:1px solid red;}
</style>
<script>
$(function(){
// get references to the canvas and context
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
// style the context
ctx.strokeStyle = "blue";
ctx.lineWidth=3;
// calculate where the canvas is on the window
// (used to help calculate mouseX/mouseY)
var $canvas=$("#canvas");
var canvasOffset=$canvas.offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;
var scrollX=$canvas.scrollLeft();
var scrollY=$canvas.scrollTop();
// this flage is true when the user is dragging the mouse
var isDown=false;
// these vars will hold the starting mouse position
var startX;
var startY;
function handleMouseDown(e){
e.preventDefault();
e.stopPropagation();
// save the starting x/y of the rectangle
startX=parseInt(e.clientX-offsetX);
startY=parseInt(e.clientY-offsetY);
// set a flag indicating the drag has begun
isDown=true;
}
function handleMouseUp(e){
e.preventDefault();
e.stopPropagation();
// the drag is over, clear the dragging flag
isDown=false;
}
function handleMouseOut(e){
e.preventDefault();
e.stopPropagation();
// the drag is over, clear the dragging flag
isDown=false;
}
function handleMouseMove(e){
e.preventDefault();
e.stopPropagation();
// if we're not dragging, just return
if(!isDown){return;}
// get the current mouse position
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
// Put your mousemove stuff here
// clear the canvas
ctx.clearRect(0,0,canvas.width,canvas.height);
// calculate the rectangle width/height based
// on starting vs current mouse position
var width=mouseX-startX;
var height=mouseY-startY;
// draw a new rect from the start position
// to the current mouse position
ctx.strokeRect(startX,startY,width,height);
}
// listen for mouse events
$("#canvas").mousedown(function(e){handleMouseDown(e);});
$("#canvas").mousemove(function(e){handleMouseMove(e);});
$("#canvas").mouseup(function(e){handleMouseUp(e);});
$("#canvas").mouseout(function(e){handleMouseOut(e);});
}); // end $(function(){});
</script>
</head>
<body>
<h4>Drag the mouse to create a rectangle</h4>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>