title: HTML5 Canvas drag and drop multiple texts
body: <p>I have an application where the user has the ability to add captions, my only problem is that I am having problem with dragging and dropping multiple texts. With the usual mousedown, mousemove, mouseup events I am only able to drag and drop one text, I want to have the ability to drag and drop multiple texts however I don't have a clear approach to this problem. Any help would be much appreciated.</p>
  
  <p>UPDATE: My code is messed up when I am trying to drag both of the texts, but I will post it anyways.</p>
  
  <p>thanks</p>
  
  <pre><code>&lt;html&gt;
  &lt;body&gt;
  &lt;canvas id = 'canvas'&gt;&lt;/canvas&gt;
  &lt;textarea id = 'topCaption'&gt;&lt;/textarea&gt;
  &lt;textarea id = 'bottomCaption'&gt;&lt;/textarea&gt;
  &lt;script type = 'text/javascript'&gt;
  
  
  window.addEventListener('load',initCanvas,false);
  
  function initCanvas(e)
  {
  canvas = document.getElementById('canvas');
  context = canvas.getContext('2d');
  canvas.height = 500;
  canvas.width = 500;
  mouse = {x:0,y:0};
  dragging = false;
  topCap = document.getElementById('topCaption');
  bottomCap = document.getElementById('bottomCaption');
  topX = 100; //top x position
  topY = 100; //top y position
  botX = 300; //bottom x position
  botY = 300; //bottom y position
  canvas.addEventListener('mousemove',MouseMove,false);
  canvas.addEventListener('mouseup',MouseUp,false);
  canvas.addEventListener('mousedown',MouseDown,false);
  window.addEventListener('keyup',KeyUp,false);
  return setInterval(keyup,10)
  }
  function clear()
  {
  context.clearRect(0,0,canvas.width,canvas.height);
  }
  
  function text(Caption,x,y)
  {
  context.fillStyle = '#000';
  context.font = '45px Impact';        //'bold 45px impact';
  context.textAlign = 'center';
  context.lineCap = 'round';
  context.lineJoin = 'round';
  context.fill();
  context.stroke();
  context.fillText(Caption,x,y);
  };
  
  
  
  
  function MouseMove(event){
  mouse.x = event.pageX - canvas.offsetLeft;
  mouse.y = event.pageY - canvas.offsetTop;
  if(dragging)
  {
  context.lineTo(mouse.x,mouse.y);
  }
  }
  
  
  
  function MouseDown(event)
  {
  dragging = true;
  setInterval(function(){
  topX = mouse.x;
  topY = mouse.y;
  botX = mouse.x;
  botY = mouse.y;
  },10)
  }
  
  function MouseUp(event)
  {
  if(dragging)
  {
  dragging = false;
  }
  }
  
  function KeyUp(event)
  {
  clear();
  text(topCap.value.toUpperCase(),topX,topY);
  text(bottomCap.value.toUpperCase(),botX,botY);
  
  }
  
  
  
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>