Canvas image change by changing src

Question

I try to change a image by changing the image.src. But it doesn't work. When it is used in setInterval() function, it works. I wan t know WHY(?).

var imgE=new Image(); 
imgE.src="Ship.png";
window.onload=init;

function init () {
ctx=document.getElementById("can1").getContext("2d");
draw();
//setInterval(draw,100);
butE=document.getElementsByTagName("button");
butE[0].onclick=change;
butE[1].onclick=getback; 
}

function draw() {
  ctx.clearRect(0,0,800,500);
  ctx.drawImage(imgE,100,100,100,100);
}
function change() {
  imgE.src="Ship_d.png";
  draw();
}
function getback() {
  imgE.src="Ship.png";
  draw();
}

I have heard of 'preload of images before uses'. But I don't know exactly. Anyway the written below works. Then why don't they need the preload? (Excuse my ignorance)

var imgE=new Image();
imgE.src="Ship.png";
var imgdE=new Image(); 
imgdE.src="Ship_d.png";
window.onload=init;

function init () {
ctx=document.getElementById("can1").getContext("2d");
draw(1);
butE=document.getElementsByTagName("button");
butE[0].onclick=change;
butE[1].onclick=getback; 
}

function draw(no) {
ctx.clearRect(0,0,800,500);
  if (no==1) {
    ctx.drawImage(imgE,100,100,100,100);
  }
  else ctx.drawImage(imgdE,100,100,100,100);
}
function change() {
draw(2);
}
function getback() {

draw(1); }

please add the html portion related to this code.

celerno
– celerno

2014-02-08 00:17:34 +00:00
Commented Feb 8, 2014 at 0:17 — celerno
– celerno, Commented Feb 8, 2014 at 0:17
possible duplicate of Javascript set img src

celerno
– celerno

2014-02-08 00:18:14 +00:00
Commented Feb 8, 2014 at 0:18 — celerno
– celerno, Commented Feb 8, 2014 at 0:18

epascarello · Accepted Answer · 2014-02-08 00:20:52Z

2

It is most likely because the image is not loaded in time.

Either preload the images needed before you use them or you need to use

imgE.src = "Ship_d.png";
imgE.onload = draw;

answered Feb 8, 2014 at 0:20

epascarello

208k20 gold badges206 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user3285913 Over a year ago

I added a second question relating your good answer by editing the original question.

epascarello Over a year ago

I have no idea what you are asking in your new question.

Collectives™ on Stack Overflow

Canvas image change by changing src

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related