Canvas mousemove event on Item

Question

I have 3 arc starting points on canvas area , so when user drags any one of the arc, I want to draw a circle until he drags in clockwise direction and remove on anti clockwise direction.

My issue is how can I get the exact arc out of 3 he is dragging and till what position and direction he dragged.

I have tried from google as below but not luck , please see jsfiddle and suggest.

http://jsfiddle.net/ineffablep/azh8ma89/38/

var arcStep = 0.02;
var numberOfarcs = 3;
for (i = 1; i <= numberOfarcs; i++) {
    var arcRadiusFactor = (1 + (1 / numberOfarcs) * i) - 0.1;
    var arcRadius = arcRadiusFactor * radius;
    context.beginPath();
    context.arc(centerX, centerY, arcRadius, 1.5 * Math.PI, 1.51 * Math.PI, false);
    context.lineWidth = 15;
    context.setLineDash([0]);

    context.strokeStyle = 'black';
    context.stroke();

}

//add events
canvas.addEventListener("mousedown", onMouseDown, false);
canvas.addEventListener("mouseup", onMouseUp, false);
canvas.addEventListener("mousemove", onMouseMove, false);

var mouseDown = false;
function onMouseDown(e) {
    mouseDown = true;
    e.stopPropagation();
}
function onMouseUp(e) {
    mouseDown = false;
    e.stopPropagation();
}
function onMouseMove(e) {
    e.stopPropagation();
    if (!mouseDown) return;
    var cursor = {
        x: e.offsetX || e.originalEvent.layerX,
        y: e.offsetY || e.originalEvent.layerY
    };

    console.log(cursor.x, cursor.y);

}

Answer 1

You can calculate the mouse vs centerpoint angle using the trigonomic arcTangent.

Here is example code and a Demo:

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
function reOffset(){
  var BB=canvas.getBoundingClientRect();
  offsetX=BB.left;
  offsetY=BB.top;        
}
var offsetX,offsetY;
reOffset();
window.onscroll=function(e){ reOffset(); }

var isDown=false;
var startX,startY;

var cx=cw/2;
var cy=ch/2;
var PI=Math.PI;
var PI2=PI*2;
var radius=50;

var radius1=100;
var drag1W=16;
var drag1H=20;
var drag1X=cx-drag1W/2;
var drag1Y=cy-drag1H/2-radius1;
var drag1IsDragging=false;
var drag1Sweep=0;

ctx.lineWidth=5;

draw();

function draw(){

  ctx.clearRect(0,0,cw,ch);

  ctx.beginPath();
  ctx.arc(cx,cy,radius,0,PI2);
  ctx.closePath();
  ctx.fillStyle='skyblue';
  ctx.strokeStyle='lightgray';
  ctx.fill();
  ctx.stroke();

  ctx.fillStyle='blue';
  ctx.fillRect(drag1X,drag1Y,drag1W,drag1H);

  if(drag1Sweep>0){
    ctx.beginPath();
    ctx.arc(cx,cy,radius1,-PI/2,-PI/2+drag1Sweep);
    ctx.strokeStyle='blue';
    ctx.stroke();
  }

}

function handleMouseDown(e){
  // tell the browser we're handling this event
  e.preventDefault();
  e.stopPropagation();

  mx=parseInt(e.clientX-offsetX);
  my=parseInt(e.clientY-offsetY);

  // Put your mousedown stuff here
  if(mx>=drag1X && mx<=drag1X+drag1W && my>=drag1Y && my<=drag1Y+drag1H){
    isDown=true;
    drag1IsDragging=true;
  }
}

function handleMouseUp(e){
  // tell the browser we're handling this event
  e.preventDefault();
  e.stopPropagation();

  // Put your mouseup stuff here
  isDown=false;
  drag1IsDragging=false;
}

function handleMouseMove(e){
  if(!isDown){return;}
  // tell the browser we're handling this event
  e.preventDefault();
  e.stopPropagation();

  mx=parseInt(e.clientX-offsetX);
  my=parseInt(e.clientY-offsetY);

  // Put your mousemove stuff here
  var dx=mx-cx;
  var dy=my-cy;
  drag1Sweep=(Math.atan2(dy,dx)+PI/2+PI2)%PI2;

  draw();

}

$("#canvas").mousedown(handleMouseDown);
$("#canvas").mousemove(handleMouseMove);
$("#canvas").mouseup(handleMouseUp);
$("#canvas").mouseout(handleMouseUp);

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>Drag from blue rectangle around the circle</h4>
<canvas id="canvas" width=300 height=300></canvas>