title: Canvas shape moving
body: <p>I have this code. This script can color in canvas like a paint application. All good. Now I put at the bottom of the script a function that add an image. I want to make that image movable, so I can drag it. I saw some scripts but I think I need to combine somehow with my function <code>findxy</code>, but I don't know how. If someone could help me.</p>
  
  <pre><code>var canvas, ctx, flag = false,
      prevX = 0,
      currX = 0,
      prevY = 0,
      currY = 0,
      dot_flag = false;
  
  var x = "white",
      y = 2;
  
  function init() {
      canvas = document.getElementById('can');
      ctx = canvas.getContext("2d");
      teams();
      w = canvas.width;
      h = canvas.height;
  
      canvas.addEventListener("mousemove", function (e) {
          findxy('move', e)
      }, false);
      canvas.addEventListener("mousedown", function (e) {
          findxy('down', e)
      }, false);
      canvas.addEventListener("mouseup", function (e) {
          findxy('up', e)
      }, false);
      canvas.addEventListener("mouseout", function (e) {
          findxy('out', e)
      }, false);
  }
  
  function color(obj) {
      switch (obj.id) {
          case "blue":
              x = "blue";
              break;
          case "red":
              x = "red";
              break;
          case "white":
              x = "white";
              break;
      }
  
  }
  
  function draw() {
      ctx.beginPath();
      ctx.moveTo(prevX, prevY);
      ctx.lineTo(currX, currY);
      ctx.strokeStyle = x;
      ctx.lineWidth = y;
      ctx.stroke();
      ctx.setDither = true;                    // set the dither to true    // set to STOKE
      ctx.setAntiAlias = true;                         // set anti alias so it smooths
      ctx.closePath();
  }
  
  function erase() {
      var m = confirm("Want to clear");
      if (m) {
          ctx.clearRect(0, 0, w, h);
          teams();
      }
  }
  
  
  function findxy(res, e) {
      if (res == 'down') {
          prevX = currX;
          prevY = currY;
          currX = e.clientX - canvas.offsetLeft;
          currY = e.clientY - canvas.offsetTop;
  
          flag = true;
          dot_flag = true;
          if (dot_flag) {
              ctx.beginPath();
              ctx.fillStyle = x;
              ctx.fillRect(currX, currY, 2, 2);
              ctx.closePath();
              dot_flag = false;
          }
      }
      if (res == 'up' || res == "out") {
          flag = false;
      }
      if (res == 'move') {
          if (flag) {
              prevX = currX;
              prevY = currY;
              currX = e.clientX - canvas.offsetLeft;
              currY = e.clientY - canvas.offsetTop;
              draw();
          }
      }
  }
  function teams() {
      var c=document.getElementById("can");
      var ctx=c.getContext("2d");
      var img=document.getElementById("topb");
      ctx.drawImage(img,103,80);
  };
  </code></pre>