I’ve got a canvas on which I can add layers, these layers I can move, select, rotate, resize etc. Below the canvas I display the properties of the layer (x, y, width, height).

What I am trying to do is when I change the values in the textboxes containing the x and y coördinates the layer should be repositioned to the coördinates I typed in.

I’ve tried several things but everything seems to mess up the canvas, I am using this to move the layer on mousemove now:

else if (layerState == MOVING && mouseDown) {
    selectedLayer.offsetX += e.pageX - canvasOffsetX - mousePrevX;
    selectedLayer.offsetY += e.pageY - canvasOffsetY - mousePrevY;


And I use this to get the x and y of the layer:

document.getElementById('x').value = Math.round(layer.offsetX*100)/100;
document.getElementById('y').value = Math.round(layer.offsetY*100)/100;

A working example of my canvas and the code can be found here:


I’ve also tried to work with these examples but couldn’t get any of them to work:


I have tried setting an eventListener on the texboxes but when I do this the canvas will dissapear.

If anyone knows how to do this it would be great!


I found out a way to change the coördinates onchange with the textbox but now I can just change them to a set number instead of taking the value I filled in the textbox:

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

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

Anyone knows how to get it to move to the filled in coördinate?