Dessin et affichage du canvas

Bonjour à tous,

je viens vers vous car je suis bloqué depuis plusieurs jours sur ce problème. Quand je crée une image dans un canvas comme fond, je rajoute un bandeau en haut à gauche de l'image puis je rajoute une série de petites images. L'opération se fait sans problème, mais lors de l'affichage, seul le bandeau est présent. Le reste demeure vide. Quand je rafraichis la page, toutes les images apparaissent ! Elles sont bien présentes, on peut y accéder via le DOM, et sont accessibles dans le code source.
J'ai essayé de les dessiner dans un timeout pour attendre la fin des opérations avant l'affichage ou d'appeler le dessin via une fonction anonyme.

Merci d'avance de votre aide,
Cdlt,
Skelethor

salut, as tu un morceau de code à nous proposer?

Bonjour et merci d'avoir répondu !
Je vous remets le code tel qu'il marche actuellement.
Le js appelant est celui-ci
<script type="text/javascript">

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45

[INDENT]<div style="margin-left:40px">img = preparerImg(document.createElement("img"), l, h, tab[3], tab[1], cpt); if(!tab[4]) { verifierPresenceGangEnnemi(x, y, l, h, img.id); if(verifierCase(map, x, y)) { img.className = "carte_grise"; img.title = tab[1]+" => ("+x+", "+y+")\n"+tab[2]; } else { img.className = "carte"; img.title = tab[1]+" => ("+x+", "+y+")\n"+tab[2]; } } else { canvas = document.createElement("canvas"); canvas.width = l; canvas.height = h; canvas.id = "canvas"+cpt; canvas.alt = tab[1];   setTimeout(function(){ ajouterBandeau(z, canvas, img, l, h, "gold"); if(parseInt(z) === 11) if(tab[6]) { amel = tab[6].split("~"); ajouterAmelioration(canvas, amel); } }, 5000); verifierPresenceGang(document.getElementById("id_gang").value, x, y, canvas); img = canvas; img.className = "carte"; img.title = tab[1]+" => ("+x+", "+y+")\n"+tab[2]; } img.addEventListener('dragover', function(ev) {bougerMap(ev, 11, p, q, qg['x'], qg['y']);}, false);   a = preparerLien(document.createElement("a"), cpt); a.setAttribute('onclick', 'popUpTerrain('+tab[0]+', '+x+', '+y+');'); a.appendChild(img);   src.appendChild(a); cpt ++;</div>

---

et les fonctions appelées

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90

function ajouterBandeau(z, canvas, img, l, h, color) { ctx = canvas.getContext('2d'); ctx.fillStyle = color;   ctx.drawImage(img, 0, 0, 135, 135, 0, 0, canvas.width, canvas.height); ctx.moveTo(0, h/z); ctx.lineTo(l/z,0); ctx.lineTo(l/z*3,0); ctx.lineTo(0, l/z*3); ctx.stroke(); ctx.fill(); return img; }   function ajouterAmelioration(canvas, amel) { if(amel) { ameliorationEau = amel[1].split(":"); ameliorationElec = amel[2].split(":"); ameliorationDef = amel[0].split(":"); ameliorationHab = amel[3].split(":"); ameliorationVoie = amel[4].split(":");   ctx = canvas.getContext('2d');   if(ameliorationEau[1] > 0) { img2 = document.createElement("img"); img2.src="../../img/icones/eauinstallee.png"; ctx.drawImage(img2, 0, 0, 100, 100, 15, canvas.height-23, 33, canvas.height-5); } if(ameliorationElec[1] > 0) { img3 = document.createElement("img"); img3.src="../../img/icones/jusinstalle.png"; ctx.drawImage(img3, 0, 0, 100, 100, 35, canvas.height-23, 53, canvas.height-5); } if(ameliorationDef[1] > 0) { img4 = document.createElement("img"); switch(ameliorationDef[1]) { case 1: img4.src="../../img/icones/nivodefense.png"; break; case 2: img4.src="../../img/icones/nivodefense2.png"; break; case 3: img4.src="../../img/icones/nivodefense3.png"; break; default: img4.src="../../img/icones/nivodefense.png"; break; } ctx.drawImage(img4, 0, 0, 100, 100, 55, canvas.height-23, 73, canvas.height-5); } if(ameliorationHab[1] > 0) { img5 = document.createElement("img"); switch(ameliorationHab[1]) { case 1: img5.src="../../img/icones/nivodevhab.png"; break; case 2: img5.src="../../img/icones/nivodevhab2.png"; break; case 3: img5.src="../../img/icones/nivodevhab3.png"; break; default: img5.src="../../img/icones/nivodevhab.png"; break; } ctx.drawImage(img5, 0, 0, 100, 100, 75, canvas.height-23, 93, canvas.height-5); } if(ameliorationVoie[1] > 0) { img6 = document.createElement("img"); switch(ameliorationVoie[1]) { case 1: img6.src="../../img/icones/niveaudevoirie.png"; break; case 2: img6.src="../../img/icones/niveaudevoirie2.png"; break; case 3: img6.src="../../img/icones/niveaudevoirie3.png"; break; default: img6.src="../../img/icones/niveaudevoirie.png"; break; } ctx.drawImage(img6, 0, 0, 100, 100, 95, canvas.height-23, 113, canvas.height-5); } } return canvas; }

---

Salut

J’ai parcouru rapidement ton code, ton principal problème est que tu dessines des images dont le chargement asynchrone n’est pas encore terminé

Code:

---

1 2 3 4 5 6

var img = new Image(); img.onload = function() { ctx.drawImage(img, 0, 0); } img.src ="../../img/icones/nivodefense.png";

---

De plus, tu n’as pas besoin de recharger sans cesse tes images avant de les afficher, tu dois donc gérer tes ressources graphiques, on appelle ça un Asset Manageur

Ok, merci je regarde ça !

Bonjour,

alors j'ai appliqué tes conseils concernant l'image.onload. Ca donne ça :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

canvas = document.createElement("canvas"); canvas.width = l; canvas.height = h; canvas.id = "canvas"+cpt; canvas.alt = tab[1]; var drawCanvasImage = function(l, h, canvas, img, amelioration) { return function() { ajouterBandeau(11, canvas, img, l, h, "gold"); if(amelioration) { amel = amelioration.split("~"); if(amel[0].length > 1) ajouterAmelioration(canvas, amel); } } } $("img").ready(drawCanvasImage(l, h, canvas, img, tab[6]));   verifierPresenceGang(document.getElementById("id_gang").value, x, y, canvas); img = canvas; img.className = "carte"; img.title = tab[1]+" => ("+x+", "+y+")\n"+tab[2];

---

Le problème est toujours identique, l'image de fond n'apparait pas. Au rafraichissement de la page ça marche très bien.
J'ai regarde les asset manager mais je n'ai pas trouvé d'applications avec canvas.
Merci d'avance !