Rotate image with mouse in an html5 canvas
<p>I'm having some trouble turning an image with my mouse by using html5. I have a background image, and a foreground image. The images display properly, but I can't get the foreground image to rotate. </p>

<pre><code>var canvas = document.getElementById("canvas"),
  ctx = canvas.getContext("2d");

var canvasOffset = $("#canvas").offset();
var offsetCX = canvasOffset.left;
var offsetCY = canvasOffset.top;
var cx = canvas.width / 2;
var cy = canvas.height / 2;
var r = -2.3;

var background = new Image();
background.src = "http://i.imgur.com/dHDMocI.png";

background.onload = function drawBackground() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.drawImage(background, 0, 0);

  var pijl = new Image();
  pijl.src = "http://i.imgur.com/2N70aC1.png";

  pijl.onload = function drawPijl() {
    var xOffset = pijl.width / -2;
    var yOffset = pijl.height / -2;
    ctx.save();
    ctx.translate(242, 233);
    ctx.rotate(r);
    ctx.drawImage(pijl, xOffset, yOffset);
    ctx.restore();
  }
}

function handleMouseDown(e) {
  mouseX = parseInt(e.clientX - offsetCX);
  mouseY = parseInt(e.clientY - offsetCY);
  drawBackground(false);
  isDown = ctx.isPointInPath(mouseX, mouseY);
  console.log(isDown);
}

function handleMouseUp(e) {
  isDown = false;
}

function handleMouseOut(e) {
  isDown = false;
}

function handleMouseMove(e) {
  if (!isDown) {
    return;
  }

  mouseX = parseInt(e.clientX - offsetCX);
  mouseY = parseInt(e.clientY - offsetCY);
  var dx = mouseX - cx;
  var dy = mouseY - cy;
  var angle = Math.atan2(dy, dx);
  r = angle;
  drawBackground();
}

$("#canvas").mousedown(function(e) {
  handleMouseDown(e);
});
$("#canvas").mousemove(function(e) {
  handleMouseMove(e);
});
$("#canvas").mouseup(function(e) {
  handleMouseUp(e);
});
$("#canvas").mouseout(function(e) {
  handleMouseOut(e);
});
</code></pre>

<p>Here's my JSfiddle: <a href="https://jsfiddle.net/rnhgqcw0/1/" rel="nofollow">https://jsfiddle.net/rnhgqcw0/1/</a></p>

<p>I used parts of this code, which I edited for use with my picture: <a href="http://jsfiddle.net/2bgypydj/" rel="nofollow">http://jsfiddle.net/2bgypydj/</a></p>

<p>My goal is to be able to turn the foreground image (large white arrow) around it's center, while the mouse is pressed, and be fixed when the mouse is released. I think I implemented the code I used wrong.  If I change the variable "r" (angle) manually and run the code, the image does turn.</p>

<p>Any help would be appreciated.</p>