I have text in a canvas and want to re-position inside a canvas, co-ordinates x & y is working but right and bottom is not working

[atifqadeer]

interact("div.mockup").draggable({
inertia: false,
autoScroll: true,
onmove: dragMoveListener,
modifiers: [
interact.modifiers.restrictRect({
restriction: document.querySelector('#sence'),
endOnly: true,
})
]
})
interact(mockup1).draggable({
inertia: false,
autoScroll: true,
onmove: dragMoveListener,
modifiers: [
interact.modifiers.restrictRect({
restriction: document.querySelector('#sence'),
endOnly: true,
})
]
})

 function dragMoveListener (event) {
  var target = event.target,
      x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
      y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;

  // translate the element
  target.style.webkitTransform =
  target.style.transform =
    'translate(' + x + 'px, ' + y + 'px)';

  // update the posiion attributes
  target.setAttribute('data-x', x);
  target.setAttribute('data-y', y);
}