enlevé

-
Edité par Anonyme 22 février 2023 à 19:24:47

Es-tu en local ou en ligne ?

deleted

-
Edité par Anonyme 22 février 2023 à 19:25:02

Je sais bien, mais avec les canvas, j'ai parfois constaté des problèmes de sécurité lorsque tu es en local. (Et qui disparaissent dès que tu arrives sur un serveur (même un serveur local comme localhost))

C'est pour ça que je posais la question.
Je vais jeter un oeil de plus près à ton problème.

EDIT : Essaye de déplacer tes lignes 9 à 34 entre les lignes 6 et 7.

deleted

-
Edité par Anonyme 22 février 2023 à 19:25:09

En fait, tu ne dessines l'image sur le canvas, qu'une fois l'image entièrement chargée (et tu as raison).

Par contre, tu dessines le canvas sur les tiles sans attendre le chargement.

En clair, tes lignes 9 à 34 sont exécutées avant ta ligne 6.

Résultat, tu ne fais que dessiner des morceaux d'un canvas qui est vide (puisque l'image n'a pas encore été dessinée dessus). Tu me suis ?

Pense à mettre ton sujet en résolu à l'aide du bouton approprié

deleted

-
Edité par Anonyme 22 février 2023 à 19:25:24

Ce chargement infini est dû à la magnifique fonction qu'est document.write().

Son comportement diffère selon le moment où elle est utilisée...
C'est pourquoi il est généralement conseillé de se passer de cette fonction (Cf Bonnes pratiques JavaScript).

Si vraiment tu y tiens, ajoutes un document.close() une fois que tu as fini de l'utiliser. (Mais je te conseille plutôt de créer tes canvas avec le DOM.)

deleted

-
Edité par Anonyme 22 février 2023 à 19:25:30

Non. Avec innerHTML, le code inséré est parsé immédiatement, donc si les paires de balises ne s'ouvrent/ferment pas correctement, le parseur agit comme à son habitude (comme si tu les avais écrites ainsi dans ton code source).

Pour ton canvas, plus clair et aussi simple qu'innerHTML selon moi, tu devrais utiliser le DOM :

ligne = ligne + 1;
tile = document.createElement('canvas');
tile.id = 'tile' + col + '-' + ligne;
(function(col, ligne) {
	tile.onclick = function() {
		chooseTile(col, ligne);
	};
}(col, ligne));
tile.width = tilesWidth;
tile.height = tilesHeight;
// Insertion de l'élément à la fin du body
// (ou ailleurs si tu le souhaites)
document.body.appendChild(tile);

// tile.style...

La seule difficulté étant la closure utilisée autour du onclick pour préserver les valeurs des variables col et ligne à l'intérieur de la fonction... (je rentre pas dans les détails, c't'un peu complexe).

deleted

-
Edité par Anonyme 22 février 2023 à 19:25:35