Перемещение нескольких объектов вместе на холсте относительно текущей позиции

Question

У меня есть элемент canvas с несколькими изображениями.Я пытаюсь добиться того, чтобы при нажатии на кнопку она перемещалась на 200 позиций в координатах X.Мне удалось переместить второе изображение, но первое изображение не двигается.И изображения должны двигаться в соответствии с их текущей позиции.Я здесь, приложив мой javascript для того же.

 $(window).on('load', function () {
    imageContent(200);
});
function imageContent(x) {
    var posX = x;
    var imgArray = ['http://via.placeholder.com/200x200?text=first', 'http://via.placeholder.com/200x200?text=second'];
    $.each(imgArray, function (i, l) {
        var img = new Image();
        img.onload = function () {
            var x = 0;

            myCanvas(img, i * posX);
        };
        img.src = l;
    });
}
function myCanvas(img, x) {
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");

    var last_ts = -1
    var speed = 0.1

    function renderScene() {
        ctx.beginPath();
        ctx.drawImage(img, x, 0);
    }
    function fly(ts) {
        if (last_ts > 0) {
            x += speed * (ts - last_ts)
        }
        last_ts = ts

        if (x < 200) {

            imageContent(x);
            requestAnimationFrame(fly);
        }
    }
    renderScene();
    $('#movebutton').click(function () {
        x = 0;
        requestAnimationFrame(fly);
    });

}

Вот кодекс .Было бы здорово, если бы кто-нибудь мог мне помочь.

Answer 1

Редактировать: Изменено для обеспечения параллельного перемещения

Я немного изменил ваш код и удалил jQuery.Посмотрите, какой эффект вы пытаетесь достичь:

var imgArr = [],
  c = document.getElementById("myCanvas"),
  ctx = c.getContext("2d"),
  last_ts = -1,
  speed = 0.1,
  x = 0

window.onload = function() {
  [
    'http://via.placeholder.com/200x200?text=first',
    'http://via.placeholder.com/200x200?text=second'
  ].forEach(function(obj, idx) {
    var img = new Image()
    img.onload = function() {
      drawImage(img, idx * 200, 0)
    }
    img.src = obj
    imgArr.push(img)
  })
}

function drawImages(x) {
  ctx.clearRect(0, 0, c.width, c.height)
  imgArr.forEach(function(obj, idx) {
    drawImage(obj, x + idx*200, 0)
  })
}

function drawImage(img, x, y) {
  ctx.beginPath()
  ctx.drawImage(img, x, y)
}

function fly(ts) {
  if (last_ts > 0) {
    x += speed * (ts - last_ts)
  }

  last_ts = ts

  if (x < 200) {
    drawImages(x)
    requestAnimationFrame(fly)
  }
}

document
  .getElementById('movebutton')
  .addEventListener('click', function() {
    x = 0
    fly()
  }, false)

canvas {
  border: 1px solid red;
}

<canvas id="myCanvas" width="960" height="600"></canvas>
<button id="movebutton">Move</button>