Reposition element on HTML5 Canvas when changing X and Y in textbox

Question

I recently asked this question asking if there was a way to move a layer on the canvas when the user changes the X and Y coördinates in a textbox. I have found a way to do this but it does have some errors in it.

To make things easier to understand I've added 2 working codepens of my canvas at the bottom of the question!

The things I have tried:

document.getElementById('x').onchange=function(){selectedLayer.offsetX = 100;
drawMarker(selectedLayer);
};

document.getElementById('y').onchange=function(){selectedLayer.offsetY = 100;
drawMarker(selectedLayer);
};

When the user changes the values of the textboxes now the layer will automatically go to the 100.100 coördinates like it should. Also while using this the layer will keep acting normal after repositioning itself. (Still being able to move it)

The other thing I tried:

document.getElementById('x').onchange=function(){selectedLayer.offsetX = document.getElementById('x').value;
drawMarker(selectedLayer);
};

document.getElementById('y').onchange=function(){selectedLayer.offsetY = document.getElementById('y').value;
drawMarker(selectedLayer);
};

Using this it will get the value of the textbox but there are some problems using this:
- When typing in a value in the textbox the layer will go to the coördinate which is 100 times bigger then the given value. (When typing x=1 it will go to x=100)
- After the layer is repositioned I am not able to select/move the layer anymore.

To make things clear here are the 2 examples in working codepens:

The first thing I've tried (offsetX = 100;)

The second thing I've tried (offsetX = document.getElementById('x').value)

To try it out in the codepens make a textlayer and move it a bit on the canvas. When you see the X and Y filled in at the textboxes at the bottom try changing the values and you will see it happen. (With the second codepen use values below 5)

If anyone knows how to fix this so it will get the right value and so it will stay selectable after it would be great!

Answer 1

Fixed this with a bit of a weird workaround but this is what I'm using now:

document.getElementById('x').onchange=function(){
    selectedLayer.offsetX = document.getElementById('x').value - canvasOffsetX + 360;
    drawMarker(selectedLayer);
};

document.getElementById('y').onchange=function(){
    selectedLayer.offsetY = document.getElementById('y').value - canvasOffsetY + 101.91;
    drawMarker(selectedLayer);
};