I successfully programmed the image to move from right to left, but now I want to add a function where the image is deleted once it reaches x: 50 and redrawn on the left.
I attempted to use control statements like "if," but unfortunately it did not work as expected.
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; //changing 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; //Is this the correct code?
draw();
}
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);