title: HTML5 Canvas Image Move Left Right Up Down with Buttons
body: <p>I am trying to create an online image editor using HTML5 and getting issue while perform image move with buttons. It does the move with mouse drag but couldn't fix it for buttons. I want to make it work with Move Up, Move Down, Move Right, Move Left Buttons.</p>
  
  <pre><code>jQuery('#moveUp').click(function () {
      var rect = canvas.getBoundingClientRect();
  
      var x = rect.left;
      var y = rect.top + 1;
  
      console.log(x);
      console.log(y);
  });
  </code></pre>
  
  <p>Here is my current program.
   <a href="https://jsfiddle.net/74u2ka1m/1/" rel="nofollow">Fiddle Project</a></p>