title: Multiple image Drag and rotate in canvas html5
body: <p>I am uploading multiple image one by one in canvas. But problem is that, image not draggable. I seen one to drag option link, But i don't known how to use this one. 
  <a href="https://jqueryui.com/draggable/" rel="nofollow noreferrer">https://jqueryui.com/draggable/</a></p>
  
  <p>I will show you one screen shot:<a href="https://i.stack.imgur.com/ADPOT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ADPOT.png" alt="enter image description here"></a></p>
  
  <p>I want to every image draggable by mouse in canvas.
  Code:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;Canvas Background through CSS&lt;/title&gt;
    &lt;style type="text/css" media="screen"&gt;
      canvas, img { display:block; margin:1em auto; border:1px solid black; }
  
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;input type='file' id="fileUpload" /&gt;
  &lt;canvas id="canvas"  width="900" height="600" style="background-color:#ffffff;"&gt;&lt;/canvas&gt;  
  
  
  &lt;/body&gt;
  &lt;script&gt;
  
  console.log("step 1");
  function el(id){return document.getElementById(id);} // Get elem by ID
  console.log("step 2");
  var canvas  = el("canvas");
  console.log("step 3");
  var context = canvas.getContext("2d");
  console.log("step 4");
  function readImage() {
      console.log("step 5");
      if ( this.files &amp;&amp; this.files[0] ) {
          console.log("step 6");
          var FR= new FileReader();
          FR.onload = function(e) {
             var img = new Image();
             img.onload = function() {
               context.drawImage(img, 0, 0);
             };
     var b = img.src = e.target.result;
   console.log("step 7");
          };       
          FR.readAsDataURL( this.files[0] );
      }
  }
  console.log("step 8");
  el("fileUpload").addEventListener("change", readImage, false);
  &lt;/script&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I  seen another link, but i cant able to  understand.
  <a href="http://jsfiddle.net/m1erickson/qm9Eb/" rel="nofollow noreferrer">http://jsfiddle.net/m1erickson/qm9Eb/</a></p>
  
  <p>Because in this example box already in canvas.<br>
  Till now i have no idea about this problem. But something done by me, I'll show you code:<a href="https://i.stack.imgur.com/engJF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/engJF.png" alt="enter image description here"></a></p>
  
  <pre><code>&lt;style&gt;
              body{ background-color: ivory; padding:10px;}
              #canvas{border:1px solid red;}
          &lt;/style&gt;
          &lt;p&gt;Resize the image using the 4 draggable corner anchors&lt;/p&gt;
          &lt;p&gt;You can also drag the image&lt;/p&gt;
          &lt;input type="file" id="input"/&gt;
          &lt;canvas id="canvas" width=750 height=550&gt;&lt;/canvas&gt;
          &lt;script type="text/javascript" src="http://code.jquery.com/jquery.min.js"&gt;&lt;/script&gt;
  
  
          &lt;script&gt;
  
  
              $(function () {
                  var canvas = document.getElementById("canvas");
                  var ctx = canvas.getContext("2d");
                  console.log("ctx  " + ctx);
                  var canvasOffset = $("#canvas").offset();
                  var offsetX = canvasOffset.left;
                  var offsetY = canvasOffset.top;
  
                  var startX;
                  var startY;
                  var isDown = false;
  
  
                  var pi2 = Math.PI * 2;
                  var resizerRadius = 8;
                  var rr = resizerRadius * resizerRadius;
                  var draggingResizer = {x: 0, y: 0};
                  var imageX = 50;
                  var imageY = 50;
                  var imageWidth, imageHeight, imageRight, imageBottom;
                  var draggingImage = false;
                  var startX;
                  var startY;
  
                  var img = new Image();
                  img.onload = function () {
                      imageWidth = img.width;
                      imageHeight = img.height;
                      imageRight = imageX + imageWidth;
                      imageBottom = imageY + imageHeight
                      draw(true, false);
                  }
  
                  var input = document.getElementById('input');
                  input.addEventListener('change', handleFiles);
  
                  function handleFiles(e) {
                      var ctx = document.getElementById('canvas').getContext('2d');
                      var img = new Image;
                      img.src = URL.createObjectURL(e.target.files[0]);
                      console.log("img.src  " + img.src);
  
                      img.onload = function () {
                          ctx.drawImage(img, 20, 20);
                      }
                  }
  
                  img.src = "https://d3s16h6oq3j5fb.cloudfront.net/1.10.7/img/cake-cat-represntative-img/shapecakes.jpg";
                  function draw(withAnchors, withBorders) {
                      // clear the canvas
                      ctx.clearRect(0, 0, canvas.width, canvas.height);
                      // draw the image
                      ctx.drawImage(img, 0, 0, img.width, img.height, imageX, imageY, imageWidth, imageHeight);
                      // optionally draw the draggable anchors
                      if (withAnchors) {
                          drawDragAnchor(imageX, imageY);
                          drawDragAnchor(imageRight, imageY);
                          drawDragAnchor(imageRight, imageBottom);
                          drawDragAnchor(imageX, imageBottom);
                      }
                      // optionally draw the connecting anchor lines
                      if (withBorders) {
                          ctx.beginPath();
                          ctx.moveTo(imageX, imageY);
                          ctx.lineTo(imageRight, imageY);
                          ctx.lineTo(imageRight, imageBottom);
                          ctx.lineTo(imageX, imageBottom);
                          ctx.closePath();
                          ctx.stroke();
                      }
                  }
  
                  function drawDragAnchor(x, y) {
                      ctx.beginPath();
                      ctx.arc(x, y, resizerRadius, 0, pi2, false);
                      ctx.closePath();
                      ctx.fill();
                  }
  
                  function anchorHitTest(x, y) {
                      var dx, dy;
                      // top-left
                      dx = x - imageX;
                      dy = y - imageY;
                      if (dx * dx + dy * dy &lt;= rr) {
                          return(0);
                      }
                      // top-right
                      dx = x - imageRight;
                      dy = y - imageY;
                      if (dx * dx + dy * dy &lt;= rr) {
                          return(1);
                      }
                      // bottom-right
                      dx = x - imageRight;
                      dy = y - imageBottom;
                      if (dx * dx + dy * dy &lt;= rr) {
                          return(2);
                      }
                      // bottom-left
                      dx = x - imageX;
                      dy = y - imageBottom;
                      if (dx * dx + dy * dy &lt;= rr) {
                          return(3);
                      }
                      return(-1);
  
                  }
  
  
                  function hitImage(x, y) {
                      return(x &gt; imageX &amp;&amp; x &lt; imageX + imageWidth &amp;&amp; y &gt; imageY &amp;&amp; y &lt; imageY + imageHeight);
                  }
  
  
                  function handleMouseDown(e) {
                      startX = parseInt(e.clientX - offsetX);
                      startY = parseInt(e.clientY - offsetY);
                      draggingResizer = anchorHitTest(startX, startY);
                      draggingImage = draggingResizer &lt; 0 &amp;&amp; hitImage(startX, startY);
                  }
  
                  function handleMouseUp(e) {
                      draggingResizer = -1;
                      draggingImage = false;
                      draw(true, false);
                  }
  
                  function handleMouseOut(e) {
                      handleMouseUp(e);
                  }
  
                  function handleMouseMove(e) {
  
                      if (draggingResizer &gt; -1) {
  
                          mouseX = parseInt(e.clientX - offsetX);
                          mouseY = parseInt(e.clientY - offsetY);
  
                          // resize the image
                          switch (draggingResizer) {
                              case 0: //top-left
                                  imageX = mouseX;
                                  imageWidth = imageRight - mouseX;
                                  imageY = mouseY;
                                  imageHeight = imageBottom - mouseY;
                                  break;
                              case 1: //top-right
                                  imageY = mouseY;
                                  imageWidth = mouseX - imageX;
                                  imageHeight = imageBottom - mouseY;
                                  break;
                              case 2: //bottom-right
                                  imageWidth = mouseX - imageX;
                                  imageHeight = mouseY - imageY;
                                  break;
                              case 3: //bottom-left
                                  imageX = mouseX;
                                  imageWidth = imageRight - mouseX;
                                  imageHeight = mouseY - imageY;
                                  break;
                          }
  
                          // enforce minimum dimensions of 25x25
                          if (imageWidth &lt; 25) {
                              imageWidth = 25;
                          }
                          if (imageHeight &lt; 25) {
                              imageHeight = 25;
                          }
  
                          // set the image right and bottom
                          imageRight = imageX + imageWidth;
                          imageBottom = imageY + imageHeight;
  
                          // redraw the image with resizing anchors
                          draw(true, true);
  
                      } else if (draggingImage) {
  
                          imageClick = false;
  
                          mouseX = parseInt(e.clientX - offsetX);
                          mouseY = parseInt(e.clientY - offsetY);
  
                          // move the image by the amount of the latest drag
                          var dx = mouseX - startX;
                          var dy = mouseY - startY;
                          imageX += dx;
                          imageY += dy;
                          imageRight += dx;
                          imageBottom += dy;
                          // reset the startXY for next time
                          startX = mouseX;
                          startY = mouseY;
  
                          // redraw the image with border
                          draw(false, true);
                      }
                  }
  
  
                  $("#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(){});
          &lt;/script&gt;
  </code></pre>
  
  <p>Boy image is fix and car image is draggable because i am fetch direct in html canvas not uploading by user.(      img.src = "<a href="https://d3s16h6oq3j5fb.cloudfront.net/1.10.7/img/cake-cat-represntative-img/shapecakes.jpg" rel="nofollow noreferrer">https://d3s16h6oq3j5fb.cloudfront.net/1.10.7/img/cake-cat-represntative-img/shapecakes.jpg</a>";).
  <br>
  First boy image is upload by use. This is not draggable.</p>
  
  <p>Please give me some idea to this problem.</p>