Untitled

<!DOCTYPE HTML>
<html>
<head>
  <style>
    #element {
      position: relative;
      cursor: pointer;
      top: 50px;
      right: 450px;
    }
    html, body {
    height: 100%;
    margin: 0;
  }

  body {
    background: gray;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: hidden;
  }
  canvas {
    background: url('background.jpg');
    border: 1px solid white;
}
  </style>
</head>

<body>
        <canvas height="336" width="638"></canvas>
  <img width="300" height="300" id="element" src="element.png">

 <button id="move">Movement</button>

  <script>
    move.onclick = function() {
      let start = Date.now();

      let timer = setInterval(function() {
        let timePassed = Date.now() - start;

        element.style.right = timePassed / 5 + 'px';

        if (timePassed > 2000) clearInterval(timer);

      }, 20);
    }
  </script>


</body>

</html>