1) ваши картинки загружаются через раз
2) этот кусок обязательно убрать
// forest.push({
// y : cvs.height/2-tree_size+10,
// x : cvs.width/2-width_path_near-tree_size/2,
// size : tree_size
// });
3) вот рабочий пример
document.body.innerHTML = `<canvas id="canvas" width="500" height="300"></canvas>`;
var cvs = document.getElementById("canvas");
var ctx = cvs.getContext("2d");
var width_path_near = 80, width_path_far = 30;
// --
var tree1 = new Image();
tree1.src = getIMG();
var masTree = [tree1];
var randTree = 0;
// --
// var randTree=Math.floor(Math.random()*masTree.length);
// var tree1 = new Image();
// var tree2 = new Image();
// var tree3 = new Image();
// var tree4 = new Image();
// tree1.src = "https://png.pngtree.com/element_origin_min_pic/00/02/61/6156839a2a633b7.jpg";
// tree2.src = "http://s02.yapfiles.ru/files/457732/derevo_1.png";
// tree3.src = "http://www.grafamania.net/uploads/posts/2014-06/1401644723_1-9.jpg";
// tree4.src = "http://img11.txapela.ru/e/c/c/4/f/52e052f118c7b8ff9317385f581.jpg";
// var masTree=[tree1, tree2, tree3, tree4];
// var randTree=Math.floor(Math.random()*masTree.length);
var tree_size = 100;
var forest = [];
let base = () => ({
x: cvs.width / 2 - width_path_near - tree_size / 2,
y: cvs.height / 2 - tree_size + 10,
size: tree_size,
});
forest[0] = base();
let max = 3 * cvs.height / 4
function draw() {
ctx.fillStyle = "rgb(84,209,216)";
ctx.fillRect(0, 0, 1000, 600);
for (var i = 0; i < forest.length; i++) {
// console.log(i)
forest[i].y += 0.5;
forest[i].x -= 0.4;
forest[i].size += 0.4;
if (forest[0].y >= max) {
forest[1] = forest[0];
forest[0] = base();
// этот кусок обязательно убрать
// forest.push({
// y : cvs.height/2-tree_size+10,
// x : cvs.width/2-width_path_near-tree_size/2,
// size : tree_size
// });
}
ctx.drawImage(masTree[randTree], forest[i].x, forest[i].y, forest[i].size, forest[i].size);
}
requestAnimationFrame(draw);
}
masTree[randTree].onload = draw;
function getIMG() {
return `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAJcEhZcwAACxMAAAsTAQCanBgAAABaUExURTSTAC+FADCIAC6BADSUADSUADSUADSUADORADORACx9ADKNAC2AADWVAEG5ADWYAC2AADedAC6CAC6DAEG5ADWXAD6vAD+yADKOADeeAEG5ACt4AEC3AEC1AMQvmTgAAAAddFJOUwKDk/4oHd8QNFvCadg/cqej+k7w1XlJir3Eq/vvM3f8hwAAAwZJREFUSMftVduSozoMlB3b8v0G5mb4/988AmY2u7UzlcnzHlelMNAttdpCAfhHlsjmTUbtPb8BR8rRrbef9zq7L1CBhWcCr4F7tESpgu751wlZ7wQEQQnQd4u2gmeguz1f8S8prmc7CBwygum5VyeCR7S9V/QOBvan8MpYBdkdZGZ656cmz0mqJAvcwLWlq7ihQl5XUjp0K3kniLW5S2aBZ5CVJHnglnDWgDxN8P22QXRS0By91GAzeEdhWQ2+B3AXGaSo1kPo3j4+jsp0AlPZQUDOpA6qxEqZSS1HJm5vBkFunEo+DLaeIwhvWbBoBCPnvNWdIqLBK6bLPjAIj99cEKaipMDeSPLOovYoOjHrZa5lsFiE4J8MZMPgs/CLWCzg4B9GZCqNwg/6Mgj0QGbU6waDo7j2sZyK20MCF/URPPlFZWAe7mpRc0PuDf6ELY/HMDD2UMywillp8o5cWq62Uf4KC5KODbLnrHg8AycxpRCyWk6drpGYBTjt9XKdOAqTPT0V9OO3xam4q3EJ0zIL546RTchUCsLw7JVNd64pqfsckavl3OmlqFUVVe9mX1bOV7UsKTVTw9Wrzn2eCUg6QQhl0VeZ5eKvBGZTnRdFq5RBqZXrXwZTwAa4MjBXAlc0yDW1FiQvKpkgpNBTdc2IT4Ypa6BeTrRT6awkUSc7l5or63Xyf3+LRUnpZiNkA1H4+WTV0ZTUivvmI59LobKd1iRGzoUKlEnzQ8U1fDsXAqUIG7YoqMxC5chGYdr3jHu1FeYEMq7j2bvEGGf3YgS1Hcf0MYsA1nKkhi8o5FqZfpl+lINPrwadVMf25BMl4svhGLcnZj6OEt8bxXM5jvYWAynLbzJ/smLby7HjO4w5rsdbyuQ4bZEou/gxIx5huzjjDzlT3I55OuZ5J870o//GPY7HPs3HRlSy7TUpjMd0hpdx3+e4jbSdJ/k9PMZtH6d4MqjNaL8ZkjmO47pFZyYh/7ZdxDih2C/G5QPB50ng+eFP+ivGNURnQj2F4BTnOQr4f/2x/gNuPzAKx8eHUAAAAABJRU5ErkJggg==`;
}
//# sourceMappingURL=index.js.map
4) requestAnimationFrame
что-то вроде вызвать каждую секунду, и при этом каждом вызове функции идёт изменение координат, размера и отрисовка кадра. что можно наблюдать в примере ниже - отрисовка есть, движения нет.
document.body.innerHTML = `<canvas id="canvas" width="500" height="300"></canvas>`;
var cvs = document.getElementById("canvas");
var ctx = cvs.getContext("2d");
var width_path_near = 80, width_path_far = 30;
// --
var tree1 = new Image();
tree1.src = getIMG();
var masTree = [tree1];
var randTree = 0;
var tree_size = 100;
var forest = [];
let base = () => ({
x: cvs.width / 2 - width_path_near - tree_size / 2,
y: cvs.height / 2 - tree_size + 10,
size: tree_size,
});
function draw() {
forest[0] = base();
ctx.fillStyle = "rgb(84,209,216)";
ctx.fillRect(0, 0, 1000, 600);
for (var i = 0; i < forest.length; i++) {
// console.log(i)
ctx.drawImage(masTree[randTree], forest[i].x, forest[i].y, forest[i].size, forest[i].size);
forest[i].y += 0.5;
forest[i].x -= 0.4;
forest[i].size += 0.4;
if (forest[0].y == 3 * cvs.height / 4) {
forest[1] = forest[0];
forest[0] = base();
// этот кусок обязательно убрать
// forest.push({
// y : cvs.height/2-tree_size+10,
// x : cvs.width/2-width_path_near-tree_size/2,
// size : tree_size
// });
}
}
requestAnimationFrame(draw);
}
masTree[randTree].onload = draw;
function getIMG() {
return `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAJcEhZcwAACxMAAAsTAQCanBgAAABaUExURTSTAC+FADCIAC6BADSUADSUADSUADSUADORADORACx9ADKNAC2AADWVAEG5ADWYAC2AADedAC6CAC6DAEG5ADWXAD6vAD+yADKOADeeAEG5ACt4AEC3AEC1AMQvmTgAAAAddFJOUwKDk/4oHd8QNFvCadg/cqej+k7w1XlJir3Eq/vvM3f8hwAAAwZJREFUSMftVduSozoMlB3b8v0G5mb4/988AmY2u7UzlcnzHlelMNAttdpCAfhHlsjmTUbtPb8BR8rRrbef9zq7L1CBhWcCr4F7tESpgu751wlZ7wQEQQnQd4u2gmeguz1f8S8prmc7CBwygum5VyeCR7S9V/QOBvan8MpYBdkdZGZ656cmz0mqJAvcwLWlq7ihQl5XUjp0K3kniLW5S2aBZ5CVJHnglnDWgDxN8P22QXRS0By91GAzeEdhWQ2+B3AXGaSo1kPo3j4+jsp0AlPZQUDOpA6qxEqZSS1HJm5vBkFunEo+DLaeIwhvWbBoBCPnvNWdIqLBK6bLPjAIj99cEKaipMDeSPLOovYoOjHrZa5lsFiE4J8MZMPgs/CLWCzg4B9GZCqNwg/6Mgj0QGbU6waDo7j2sZyK20MCF/URPPlFZWAe7mpRc0PuDf6ELY/HMDD2UMywillp8o5cWq62Uf4KC5KODbLnrHg8AycxpRCyWk6drpGYBTjt9XKdOAqTPT0V9OO3xam4q3EJ0zIL546RTchUCsLw7JVNd64pqfsckavl3OmlqFUVVe9mX1bOV7UsKTVTw9Wrzn2eCUg6QQhl0VeZ5eKvBGZTnRdFq5RBqZXrXwZTwAa4MjBXAlc0yDW1FiQvKpkgpNBTdc2IT4Ypa6BeTrRT6awkUSc7l5or63Xyf3+LRUnpZiNkA1H4+WTV0ZTUivvmI59LobKd1iRGzoUKlEnzQ8U1fDsXAqUIG7YoqMxC5chGYdr3jHu1FeYEMq7j2bvEGGf3YgS1Hcf0MYsA1nKkhi8o5FqZfpl+lINPrwadVMf25BMl4svhGLcnZj6OEt8bxXM5jvYWAynLbzJ/smLby7HjO4w5rsdbyuQ4bZEou/gxIx5huzjjDzlT3I55OuZ5J870o//GPY7HPs3HRlSy7TUpjMd0hpdx3+e4jbSdJ/k9PMZtH6d4MqjNaL8ZkjmO47pFZyYh/7ZdxDih2C/G5QPB50ng+eFP+ivGNURnQj2F4BTnOQr4f/2x/gNuPzAKx8eHUAAAAABJRU5ErkJggg==`;
}
//# sourceMappingURL=index.js.map
5) оборачивайте в функцию повторяющиеся данные
let base = () => ({
x: cvs.width / 2 - width_path_near - tree_size / 2,
y: cvs.height / 2 - tree_size + 10,
size: tree_size,
});
6) по возможности выносите вычисляемые значения
например 3 * cvs.height / 4
достаточно посчитать один раз вне функции