Как удалять и повторять изображения?

Question

Я заставил изображение двигаться справа налево.Но я хочу добавить функцию, которая, когда изображение достигает в x: 50, это изображение удаляется и рисовать влево.

Я пытался использовать оператор управления типа "если", но он не работает

var canvas = document.getElementById("Canvas");
var ctx = canvas.getContext("2d");

var img = new Image();
img.src = "img1.png";
var speed = 0;
var xpos = 800;
var CXpos = 0;  //changeing xpos
var result = Math.floor(Math.random() * 500) + 1;

function icon(){
    ctx.beginPath();
    speed -= 1;
    CXpos = xpos + speed;
    ctx.drawImage(img, CXpos, result, 60, 60);
    if(Cxpos == 50){
        canvas.width = canvas.width;    //I don't know it's correct code?
        icon();
    }
    ctx.closePath();
}

function iconypos(){
    var num = Math.floor(Math.random*100)+1
    return num;
}

function draw(){
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    icon();
}

setInterval(draw, 10);

Answer 1

Если я вас правильно понимаю, это то, что вы ищете.Просто "сбросьте" speed var в начальную точку (которая 0).

Нет необходимости снова вызывать icon(), потому что следующий тик в интервале вызовет это в любом случае.

var canvas = document.getElementById("Canvas");
var ctx = canvas.getContext("2d");

var img = new Image();
img.src = "https://avatars2.githubusercontent.com/u/15933454?s=60&v=4";
var speed = 0;
var xpos = 800;
var CXpos = 0;  //changeing xpos
var result = Math.floor(Math.random() * 500) + 1;

function icon(){
    ctx.beginPath();
    speed -= 1;
    CXpos = xpos + speed;
    ctx.drawImage(img, CXpos, result, 60, 60);
    if(CXpos == 50){
        speed = 0;    //I don't know it's correct code?
        //icon();
    }
    ctx.closePath();
}

function iconypos(){
    var num = Math.floor(Math.random*100)+1
    return num;
}

function draw(){
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    icon();
}

setInterval(draw, 10);

<canvas id="Canvas" width="800" height="350"></canvas>