title: Javascript drag & drop canvas with limits
body: <p>I create a page that makes me move a canvas (by changing X and Y position).
  This is my code that works: <a href="https://jsfiddle.net/rrmwub4h/1/" rel="nofollow">https://jsfiddle.net/rrmwub4h/1/</a></p>
  
  <pre><code>var canvas = document.getElementById("id1");
  var ctx = canvas.getContext("2d");
  ctx.font = "30px Arial";
  ctx.fillText("Drag and drop me",10,50);
  
  document.getElementById('id1').onmousedown = function () {
      _drag_init(this);
      return false;
  };
  document.onmousemove = _move_elem;
  document.onmouseup = _destroy;
  
  var selected = null, // Object of the element to be moved
  x_pos = 0, y_pos = 0, // Stores x &amp; y coordinates of the mouse pointer
  x_elem = 0, y_elem = 0; // Stores top, left values (edge) of the element
  function _drag_init(elem) {
      selected = elem;
      x_elem = x_pos - selected.offsetLeft;
      y_elem = y_pos - selected.offsetTop;
  }
  function _move_elem(e) {
      x_pos = document.all ? window.event.clientX : e.pageX;
      y_pos = document.all ? window.event.clientY : e.pageY;
      if (selected !== null) {
          selected.style.left = (x_pos - x_elem) + 'px';
          selected.style.top = (y_pos - y_elem) + 'px';
      }
  }
  // Destroy the object when we are done
  function _destroy() {
      selected = null;
  }
  </code></pre>
  
  <p>But I wanna make limits for X and Y positions when I move the canvas (for exemple varies between 0 and 300px and not surpass the limit of 300px)</p>
  
  <p>How can I add this conditon to my code ?</p>