html code javascript non chargé correctement

Question

function drawimage() 
{ 
var f=document.getElementById("myCanvas"); 
    var cxt1=f.getContext("2d"); 
    var img1=new Image(); 
    img1.src="image.jpg"; 
    cxt1.drawImage(img1,0,0,750,400); 
} 

<canvas id="myCanvas" width="1125" height="600" style="border:1px solid #c3c3c3;"> 
</canvas> 
<script type="text/javascript"> 

drawimage(). 

Ceci est mon javascript mais lorsque je l'exécute sur le navigateur, seule la bordure arrive la 1ère fois et l'image n'apparaît qu'après avoir rafraîchi la page. Quel est le problème avec le code?

Answer 1

Essayez de faire l'image de dessin dans un gestionnaire « de charge »:

var img1=new Image(); 
img1.src="image.jpg"; 
img1.onload = function() { 
    cxt1.drawImage(img1,0,0,750,400); 
}; 

Answer 2

la ligne img1.src DOIT être après la onload parce que si le navigateur est assez rapide (+ peut-être l'image est mise en mémoire cache ou il est localhost) , l'image sera chargée juste après le réglage de img1.src. Dans ce cas, l'onload ne sera pas appelé.

var img1=new Image(); 
img1.onload = function() { 
    cxt1.drawImage(img1,0,0,750,400); 
}; 
img1.src="image.jpg";