javascript - HTML5 Canvas Image Move Left Right Up Down with Buttons -

i trying create online image editor using html5 , getting issue while perform image move buttons. move mouse drag couldn't fix buttons. want make work move up, move down, move right, move left buttons.

jquery('#moveup').click(function () {     var rect = canvas.getboundingclientrect();      var x = rect.left;     var y = rect.top + 1;      console.log(x);     console.log(y); }); 

here current program. fiddle project

try using image instead of canvas.

jquery('#moveup').click(function () { var rect = image.getboundingclientrect(); var x = rect.left; var y = rect.top - 1; clear(); element.translate(x, y); drawimage(); }); 

...or if prefer function in order not having repeat yourself:

function move(direction) {   var rect = image.getboundingclientrect();   var x = rect.left;   var y = rect.top;   var dist = 5 //set distance    switch (direction) {     case 'up':         y -= dist;       break;     case 'down':         y += dist;       break;      case 'left':         x -= dist;       break;     case 'right':         x += dist;       break;    };    clear();     element.translate(x, y);   drawimage(); };  jquery('#moveup').click(function () {     move('up'); });   jquery('#movedown').click(function () {     move('down'); });  jquery('#moveleft').click(function () {     move('left'); });  jquery('#moveright').click(function () {     move('right'); }); 

regarding keys, check 1 out: https://api.jquery.com/keypress/ - example (if decide use function created above):

$(document).keydown(function () {      move('down'); });