Is it possible to have an array of coordinates and drag and drop an image only along those coordinates? I would like to use only javascript and not use a javascript library. I keep scratching my head and googling this forever and can't find how to do this or if it is possible.
Demo: http://jsfiddle.net/m1erickson/7vmML/
Example code:
<!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(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var $canvas=$("#canvas");
var canvasOffset=$canvas.offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;
var scrollX=$canvas.scrollLeft();
var scrollY=$canvas.scrollTop();
var isDown=false;
var startX;
var startY;
var points=[];
points.push({x:10,y:10});
points.push({x:75,y:100});
points.push({x:150,y:125});
points.push({x:125,y:200});
var imageX=-200;
var imageY=-200;
var img=new Image();
img.onload=start;
img.crossOrigin="anonymous";
img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house32x32transparent.png";
function start(){
drawAll();
}
function drawAll(){
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.beginPath();
ctx.moveTo(points[0].x+4,points[0].y+4)
for(var i=1;i<points.length;i++){
var pt=points[i];
ctx.lineTo(pt.x+4,pt.y+4);
}
ctx.stroke();
//
for(var i=0;i<points.length;i++){
var pt=points[i];
ctx.fillRect(pt.x,pt.y,8,8);
}
//
ctx.drawImage(img,imageX,imageY);
}
function handleMouseDown(e){
e.preventDefault();
isDown=true;
}
function handleMouseUp(e){
e.preventDefault();
isDown=false;
}
function handleMouseOut(e){
e.preventDefault();
isDown=false;
}
function handleMouseMove(e){
if(!isDown){return;}
e.preventDefault();
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
var minDistance=1000;
var minPoint=-1;
for(var i=0;i<points.length;i++){
var pt=points[i];
var dx=mouseX-pt.x;
var dy=mouseY-pt.y;
var distance=Math.sqrt(dx*dx+dy*dy);
if(distance<minDistance){
minDistance=distance;
imageX=pt.x-img.width/2;
imageY=pt.y-img.height/2;
}
}
drawAll();
}
$("#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 mouse. Image will snap to nearest point.</h4>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
Note that this example code uses jQuery to listen for mouse events. If you prefer pure javascript you can use these event bindings instead:
canvas.onmousedown=handleMouseDown;
canvas.onmouseup=handleMouseUp;
canvas.onmouseout=handleMouseOut;
canvas.onmousemove=handleMouseMove;
And you can calculate mouse position like this:
function getMousePos(canvas,e) {
var rect=canvas.getBoundingClientRect();
return{ x:e.clientX-rect.left, y:e.clientY-rect.top };
}
Yes, calculate the shortest distance to each of the points and override the mouse position with the point that is closest.
Lets use a simple point array as an example:
var points = [10,200, 50,250, 100,100, 150,120, 200,240,
250,200, 300,120, 350,180, 400,150];
Now, when you move you item over you get the closest point this way:
Lets first get the mouse x and y position (for demo - in you code you would use the position of the item):
var rect = canvas.getBoundingClientRect(),
x = e.clientX - rect.left,
y = e.clientY - rect.top,
Now you can iterate the point array and get the point with shortest distance to mouse x and y:
var i = 0,
pIndex = -1,
minDist = 999999999,
dist;
/// get shortest distance
for(; i < points.length; i+=2) {
/// get distance from current point to mouse x,y
dist = getDistance(x, y, points[i], points[i+1]);
/// if less than previous distance, update
if (dist < minDist) {
minDist = dist; /// current low
pIndex = i; /// point index
}
}
pointX = points[pIndex];
pointY = points[pIndex+1];
The function for calculating distance is simple trigonometry calculating the hypotenuse:
function getDistance(x1, y1, x2, y2) {
var dx = x2 - x1,
dy = y2 - y1;
return Math.abs(Math.sqrt(dx * dx + dy * dy));
}
Now you can draw your item at (pointX, pointY).
Live demo
The example here uses a very rough point array. If you need finer resolution you can use a line smoother such as this one or interpolate the point on the line. Here is a version where line smoothing is applied to increase its resolution and smoothness (you can drop the smoothness by setting tension to 0, and you can adjust resolution by changing number of segments, see following demo):
Here is a demo where line smoothing is used
Also have in mind that you may need to optimize the check range by for example doing a rough iteration first then use the 3-4 closest points and do a finer iteration between the range those represents.
Update
To allow snapping only when is held down and moved add these lines to code:
var allowMove = false;
canvas.onmousedown = function() {
allowMove = true;
}
canvas.onmouseup = function() {
allowMove = false;
}
canvas.onmousemove = function(e) {
if (!allowMove) return;
... as before ...
Related
So I hit a snag while building an HTML5 canvas UI element. I want to make the circle in this toggle switch drag to the X-coordinate that the user drags it to (there's ultimately a lot more that this thing is going to have but I want to do it a step at a time!). I can output the x coordinates so I know that's working but for some reason I cannot get it to work in my animation loop to change the variable primX. Here's my code:
HTML:
<canvas id="toggle1" class="toggle" onmousemove="getCoords(event)"></canvas>
<p id="test"></p>
The CSS is irrelevant, as long as you set any width to .toggle or #toggle1
JavaScript:
var canvas=document.getElementById("toggle1");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height=cw/3;
var PI=Math.PI;
var PI2=(PI * 2);
var cx=ch/2;
var cy=ch/2;
var backStyle="#FFFFFF"
var globalID;
var lw=ctx.lineWidth=8;
var radius=ch/2-lw/2;
var half=cw/2;
var currX;
var globalID;
var mouseIsDown=false;
function getCoords(event) {
var currX = event.clientX;
document.getElementById("test").innerHTML = currX;
}
function backGround(){
if (primX > half){
Style="#00FF00";
} else {
Style="#FF0000";
};
ctx.fillStyle=backStyle;
ctx.strokeStyle=Style;
ctx.beginPath();
ctx.arc(cx+lw/2,cy,radius,(0.5 * PI),(1.5 * PI));
ctx.lineTo((cw-(ch/2)),0+lw/2);
ctx.arc((cw-(ch/2+lw/2)),cy,radius,(1.5 * PI),(.5 * PI));
ctx.lineTo(cx,ch-lw/2);
ctx.fill();
ctx.stroke();
};
function mainCir() {
if (primX > half){
Style="#00FF00";
on=true;
} else {
Style="#FF0000";
on=false;
};
ctx.beginPath();
ctx.arc(primX,cy,radius,0,PI2);
ctx.fillStyle=Style;
ctx.fill();
}
primX = cx;
function draw(){
backGround();
mainCir();
}
draw();
function animate() {
primX=currX;
globalID=requestAnimationFrame(animate);
draw();
}
$("#toggle1").mousedown(function() {
mouseIsDown=true;
});
$(document).mouseup(function() {
if(mouseIsDown){
animate();
mouseIsDown=false;
}
});
I've tried a ton of different things but nothing work. If I put a simple animation in the animate() function then that seems to work when the mouse is clicked and held on the element, such as primX++;
But I have no idea how to "animate" the circle to where it goes to the X coordinate that the user drags it to. I've tried a couple of different things and rearranged stuff but it just ends up either disabling animations completely or, as you can see by THIS FIDDLE the circle just disappears.
If anyone knows how to fix this issue, I'd be grateful. Thank you!
It was a little thing. In the function that get the coordinates:
function getCoords(event) {
var currX = event.clientX;
document.getElementById("test").innerHTML = currX;
}
you are declaring the currX variable. But it was alredy declared, so what you are doing is to create a new one whose scope get lost in the moment the function finish.
You want this:
function getCoords(event) {
currX = event.clientX;
document.getElementById("test").innerHTML = currX;
}
Hope it helps!
UPDATE:
There are two more details that maybe are useful for you:
First: you are getting the coordinates in the application's client area, not in the canvas. So maybe you want to add the canvas' left offset.
Second: canvas.width is the logical canvas width, different from the element.width CSS attribute. So most sure you want to make a units conversion.
Altogether:
function getCoords(event) {
currX = event.clientX - $(event.target).offset().left ;
currX = currX * (canvas.width / $(canvas).width());
if (currX < radius) currX = radius;
if (currX > canvas.width - radius) currX = canvas.width - radius;
document.getElementById("test").innerHTML = currX;
}
Here you can read more about getting mouse coordinates and here about the dimensions of a canvas.
I'm struggling with this for a while now. I'm drawing a grid on the canvas. I add a mousemove eventHandler and track the mouseX and mouseY positions. I would like to be able to calculate the distance from the mouse position to the item in the grid. I can't seem to get this right, I've tried a few different solutions, like adding a loop in the mousemove handler and using requestAnimationFrame, but both solutions are very slow.
Here's my code below:
function setupCanvas(){
canvas = document.getElementById('canvas');
ctx = canvas.getContext('2d');
width = canvas.width = window.innerWidth;
height = canvas.height = window.innerHeight;
blockWidth = width/2 - 150;
blockHeight = height/2 - 100;
gridArray = [];
gridWidthArray = [];
ctx.fillRect(0,0,width,height);
//drawGrid();
drawInitGrid();
canvas.addEventListener('mousemove',onMouseMoveHandler);
}
function drawInitGrid(){
for(x = 0; x<16; x++){
for(y = 0; y<11; y++){
var gridBlock = new GridBlock((blockWidth) + x*20, (blockHeight) + y*20, blockWidth, blockHeight);
gridBlock.render(ctx);
gridArray.push(gridBlock);
//gridWidthArray.push(gridBlock.xPos)
}
}
}
function onMouseMoveHandler(e){
if(containerBounds(e)){
mouseX = e.offsetX;
mouseY = e.offsetY;
console.log(mouseX, mouseY);
//console.log(gridWidthArray);
for(var grid in gridArray){
//console.log(gridArray[grid].xPos)
}
}
}
I've also tried adding a mouseevent in the GridBlock object, but that also doesn't seem to work.
You can calculate the distance between any 2 points like this:
var dx=point2.x-point1.x;
var dy=point2.y-point1.y;
var distance=Math.sqrt(dx*dx+dy*dy);
Also in your fiddle your mouse position calculation should account for the offset position of the canvas within the window:
var BB=canvas.getBoundingClientRect();
var offsetX=BB.left;
var offsetY=BB.top;
function onMouseMoveHandler(e){
var mouseX=parseInt(e.clientX-offsetX);
var mouseY=parseInt(e.clientY-offsetY);
}
[ Finding nearest point in grid ]
Assume you have a mouse position [mx,my] and assume you have a grid with its top-left at [0,0] and with its cell size at cellWidth X cellHeight.
Then you can calculate the grid cell closest to the mouse like this:
var cellX=parseInt((mx+cellWidth/2)/cellWidth)*cellWidth;
var cellY=parseInt((my+cellHeight/2)/cellHeight)*cellHeight;
Of course, if the grid's top-left is not at [0,0], you will have to adjust for the gridss offset.
I want to draw a rectangle on a canvas around the mouse cursor that smoothly follows the cursor. Unfortunately, the mousemoved event doesn't fire quickly enough, and the drawing constantly trails behind it. So I'm assuming I need to predict where the mouse is, and draw the rectangle at that point. I'm trying to write a simple library to abstract that away, but it's not tracking as closely as I'd like for fast movements (in fact, fast movements are jittery). For slow movements, it tracks fairly well, and better than the simple solution of using the raw mouse coordinates.
The basic idea is that mousemove updates a couple of external variables with the current position of the mouse. A requestAnimationFrame loop (the Watcher function) tracks these variables and their previous values over time to calculate the speed the mouse is moving at (in the x axis). When the PredictX function is called, it returns the current x position, plus the last change in x multiplied by the speed. A different reqeustAnimationFrame loop moves the rectangle based on the predicted x value.
var MouseLerp = (function () {
var MOUSELERP = {};
var current_x = 0;
var last_x = 0;
var dX = 0;
var last_time = 0;
var x_speed = 0;
var FPS = 60;
function Watcher(time) {
var dT = time - last_time
if (dT > (1000 / FPS)) {
dX = last_x - current_x;
last_x = current_x;
x_speed = dX / dT
last_time = time;
}
requestAnimationFrame(Watcher);
}
MOUSELERP.PredictX = function () {
return Math.floor((dX * x_speed) + current_x);
}
MOUSELERP.Test = function () {
var target_element = $(".container")
target_element.append('<canvas width="500" height="500" id="basecanvas"></canvas>');
var base_ctx = document.getElementById("basecanvas").getContext("2d");
var offset = target_element.offset()
var offset_x = offset.left;
var offset_y = offset.top;
var WIDTH = $(window).width();
var HEIGHT = $(window).height();
var FPS = 60;
var t1 = 0;
function updateRect(time) {
var dT = time - t1
if (dT > (1000 / FPS)) {
base_ctx.clearRect(0, 0, WIDTH, HEIGHT)
base_ctx.beginPath();
base_ctx.strokeStyle = "#FF0000";
base_ctx.lineWidth = 2;
base_ctx.rect(MOUSELERP.PredictX(), 100, 100, 100)
base_ctx.stroke();
t1 = time;
}
requestAnimationFrame(updateRect)
}
updateRect();
$(target_element).mousemove(function (event) {
current_x = event.pageX - offset_x;
});
requestAnimationFrame(Watcher);
}
MOUSELERP.Test()
return MOUSELERP;
}())
What am I doing wrong?
Here's a jsfiddle of the above: http://jsfiddle.net/p8Lr224p/
Thanks!
The mouse pointer will always be quicker than drawing, so your best bet is not to give the user's eye a reason to perceive latency. So, turn off the mouse cursor while the user is drawing. Draw a rectangle at the mouse position to visually act as the mouse cursor.
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var $canvas=$("#canvas");
var canvasOffset=$canvas.offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;
var mouseX=0;
var mouseY=0;
canvas.style.cursor="none";
$("#canvas").mousemove(function(e){handleMouseMove(e);});
function handleMouseMove(e){
ctx.clearRect(mouseX-1,mouseY-1,9,9);
mouseX=e.clientX-offsetX;
mouseY=e.clientY-offsetY;
ctx.fillRect(mouseX,mouseY,8,8);
}
body{ background-color: ivory; }
#canvas{border:1px solid red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h4>Less 'lagging' when mouse is invisible & canvas draws cursor.</h4>
<canvas id="canvas" width=300 height=300></canvas>
,
I'm looking for the equation to convert a circle to an ellipse so that I can find the shortest distance from a point to an ellipse border. I have found the equation for the distance between a circle and a point but cant figure out how to convert it to work with a ellipse.
px and py are the points and x and y are the circle origin and ray is the radius
closestCirclePoint: function(px, py, x, y, ray) {
var tg = (x += ray, y += ray, 0);
return function(x, y, x0, y0) {
return Math.sqrt((x -= x0) * x + (y -= y0) * y);
}(px, py, x, y) > ray
? {x: Math.cos(tg = Math.atan2(py - y, px - x)) * ray + x,
y: Math.sin(tg) * ray + y}
: {x: px, y: py};
}
[ Addition to answer: How to approximate the nearest point on the ellipse]
If you are willing to sacrifice perfection for practicality…
Here is a way to calculate an ellipse point that is “near-ish” to your targeted point.
The method:
Determine which quadrant of the ellipse your target point is in.
Calculate the beginning and ending radian angles of that quadrant.
Calculate points along that ellipse quadrant (“walk the ellipse”).
For each calculated ellipse point, calc the distance to the target point.
Save the ellipse point with the shortest distance to the target.
Cons:
The result is approximate.
It's less elegant than the mathematically perfect calculation—uses a brute force method.
(but an efficient brute force method).
Pros:
The approximated result is pretty good.
Performance is pretty good.
The calculations are much simpler.
The calculations are (probably) faster than the mathematically perfect calculation.
(costs about 20 trig calculations plus some addition/subtraction)
If you need greater accuracy, you just change 1 variable
(greater accuracy costs more calculations, of course)
Performance note:
You could pre-calculate all the "walking points" on the ellipse for even better performance.
Here’s the code for this method:
// calc a point on the ellipse that is "near-ish" the target point
// uses "brute force"
function getEllipsePt(targetPtX,targetPtY){
// calculate which ellipse quadrant the targetPt is in
var q;
if(targetPtX>cx){
q=(targetPtY>cy)?0:3;
}else{
q=(targetPtY>cy)?1:2;
}
// calc beginning and ending radian angles to check
var r1=q*halfPI;
var r2=(q+1)*halfPI;
var dr=halfPI/steps;
var minLengthSquared=200000000;
var minX,minY;
// walk the ellipse quadrant and find a near-point
for(var r=r1;r<r2;r+=dr){
// get a point on the ellipse at radian angle == r
var ellipseX=cx+radiusX*Math.cos(r);
var ellipseY=cy+radiusY*Math.sin(r);
// calc distance from ellipsePt to targetPt
var dx=targetPtX-ellipseX;
var dy=targetPtY-ellipseY;
var lengthSquared=dx*dx+dy*dy;
// if new length is shortest, save this ellipse point
if(lengthSquared<minLengthSquared){
minX=ellipseX;
minY=ellipseY;
minLengthSquared=lengthSquared;
}
}
return({x:minX,y:minY});
}
Here is code and a Fiddle: http://jsfiddle.net/m1erickson/UDBkV/
<!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; padding:20px; }
#wrapper{
position:relative;
width:300px;
height:300px;
}
#canvas{
position:absolute; top:0px; left:0px;
border:1px solid green;
width:100%;
height:100%;
}
#canvas2{
position:absolute; top:0px; left:0px;
border:1px solid red;
width:100%;
height:100%;
}
</style>
<script>
$(function(){
// get canvas references
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var canvas2=document.getElementById("canvas2");
var ctx2=canvas2.getContext("2d");
// calc canvas position on page
var canvasOffset=$("#canvas").offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;
// define the ellipse
var cx=150;
var cy=150;
var radiusX=50;
var radiusY=25;
var halfPI=Math.PI/2;
var steps=8; // larger == greater accuracy
// get mouse position
// calc a point on the ellipse that is "near-ish"
// display a line between the mouse and that ellipse point
function handleMouseMove(e){
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
// Put your mousemove stuff here
var pt=getEllipsePt(mouseX,mouseY);
// testing: draw results
drawResults(mouseX,mouseY,pt.x,pt.y);
}
// calc a point on the ellipse that is "near-ish" the target point
// uses "brute force"
function getEllipsePt(targetPtX,targetPtY){
// calculate which ellipse quadrant the targetPt is in
var q;
if(targetPtX>cx){
q=(targetPtY>cy)?0:3;
}else{
q=(targetPtY>cy)?1:2;
}
// calc beginning and ending radian angles to check
var r1=q*halfPI;
var r2=(q+1)*halfPI;
var dr=halfPI/steps;
var minLengthSquared=200000000;
var minX,minY;
// walk the ellipse quadrant and find a near-point
for(var r=r1;r<r2;r+=dr){
// get a point on the ellipse at radian angle == r
var ellipseX=cx+radiusX*Math.cos(r);
var ellipseY=cy+radiusY*Math.sin(r);
// calc distance from ellipsePt to targetPt
var dx=targetPtX-ellipseX;
var dy=targetPtY-ellipseY;
var lengthSquared=dx*dx+dy*dy;
// if new length is shortest, save this ellipse point
if(lengthSquared<minLengthSquared){
minX=ellipseX;
minY=ellipseY;
minLengthSquared=lengthSquared;
}
}
return({x:minX,y:minY});
}
// listen for mousemoves
$("#canvas").mousemove(function(e){handleMouseMove(e);});
// testing: draw the ellipse on the background canvas
function drawEllipse(){
ctx2.beginPath()
ctx2.moveTo(cx+radiusX,cy)
for(var r=0;r<2*Math.PI;r+=2*Math.PI/60){
var ellipseX=cx+radiusX*Math.cos(r);
var ellipseY=cy+radiusY*Math.sin(r);
ctx2.lineTo(ellipseX,ellipseY)
}
ctx2.closePath();
ctx2.lineWidth=5;
ctx2.stroke();
}
// testing: draw line from mouse to ellipse
function drawResults(mouseX,mouseY,ellipseX,ellipseY){
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.beginPath();
ctx.moveTo(mouseX,mouseY);
ctx.lineTo(ellipseX,ellipseY);
ctx.lineWidth=1;
ctx.strokeStyle="red";
ctx.stroke();
}
}); // end $(function(){});
</script>
</head>
<body>
<div id="wrapper">
<canvas id="canvas2" width=300 height=300></canvas>
<canvas id="canvas" width=300 height=300></canvas>
</div>
</body>
</html>
Original Answer
Here's how circles and ellipses are related
For a horizontally aligned ellipse:
(xx) / (aa) + (yy) / (bb) == 1;
where a is the length to the horizontal vertex and where b is the length to the vertical vertex.
How circles and ellipses relate:
If a==b, the ellipse is a circle !
However...!
Calculating the minimal distance from any point to a point on an ellipse involves much more calculation than with a circle.
Here's a link to the calculation (click on DistancePointEllipseEllipsoid.cpp):
http://www.geometrictools.com/SampleMathematics/DistancePointEllipseEllipsoid/DistancePointEllipseEllipsoid.html
I want to be able to orient something toward the mouse on an HTML5 canvas. But when I use Math.atan2 and the other trig functions, the directions get messed up. It rotates in the opposite direction that it should and it's usually off by 90 degrees.
It will probably be easier if you see it for yourself. Here's the javascript:
var mouseX=0;
var mouseY=0;
var canvas = document.getElementById("world");
var context = canvas.getContext("2d");
function mouseMoveHandler(event) {
mouseX = event.clientX;
mouseY = event.clientY;
}
function windowResizeHandler() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
function loop() {
// Clear Screen
context.clearRect(0,0,canvas.width,canvas.height);
// Calculate the angle to the mouse
a = Math.atan2(mouseX-canvas.width/2,mouseY-canvas.height/2);
// Draw a line in the direction of the mouse
context.beginPath();
context.fillStyle = "#000000";
context.moveTo(canvas.width/2+10, canvas.height/2);
context.lineTo(canvas.width/2-10, canvas.height/2);
context.lineTo(canvas.width/2+Math.cos(a)*100, canvas.height/2+Math.sin(a)*100);
context.fill();
}
document.addEventListener('mousemove', mouseMoveHandler, false);
window.addEventListener('resize', windowResizeHandler, false);
windowResizeHandler();
setInterval(this.loop, 1000 / 30 );
And here's the HTML:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<canvas id='world'></canvas>
<script type="text/javascript" src="test.js"></script>
</body>
</html>
You can see it in action here: http://sidefofx.com/projects/stackOverflowQuestion/
How can I make the line point in the direction of the mouse?
I rechecked and what you're doing wrong (and I've done this error a few times myself) is that atan2 accepts first the y coordinate, then the x coordinate.
MDC says:
Note that the arguments to this function pass the y-coordinate first and the x-coordinate second.
So
a = Math.atan2(mouseX-canvas.width/2,mouseY-canvas.height/2);
should be
a = Math.atan2(mouseY-canvas.height/2, mouseX-canvas.width/2);
Test updated: http://jsfiddle.net/79FaY/1/