Le canvas n'est pas trouvé sur ma page HTML

**progdebutant** · 14/02/2016, 13h30

Salut

J'ai un petit problème simple mais bizarre je ne trouve pas la solution : Le canvas semble ne pas être vu par "document.get...." oO

La console m'affiche l'erreur : ctx indéfini quand je lance la fonction de dessin d'un carré.
Il n'y a pas d'erreur affichée lorsque la fonction getctx() est lancée mais seulement quand la fonction de dessin est lancée.

Mon code JS est une fonction init(), dont le début lance une fonction getctx() pour lire le context d'un canvas.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
function init(){
	var ctx=getctx();

Voilà mon code de la fonction ctx() :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
function getctx(){
			alert("ok");
	if(document.getElementById("canvas")){
		var canvas=document.getElementById('canvas');
		canvas.style.width=1200+"px";
		canvas.style.height=1200+"px";
		var ctx=canvas.getContext("2d");
		return ctx;
	}
}

On y voit un alert() qui apparaît bien quand la fonction se lance, mais il n'apparaît pas si je déplace l'alert() juste sous la condition if().
Ce qui signifie que le canvas n'est pas trouvé dans ma page HTML non ?
Pourtant le canvas est bien sur ma page HTML avec l'id="canvas".

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<body>
<canvas id="canvas"></canvas>
</body>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
// Dessine un carré bleu, mais cette fonction ne fonctionne pas et j'ai l'erreur ctx indéfini.
function bleu(x1,y1,x2,y2){
	var ctx=getctx();
	ctx.fillStyle="blue";
	ctx.fillRect(x1,y1,x2,y2);
}

**progdebutant** · 14/02/2016, 13h55

Est-ce que mon problème viendrait du fait que je n'ai pas mis de fichier css pour le canvas ?

**Watilin** · 14/02/2016, 16h15

Non, ce n'est pas un problème de CSS. À ce sujet, je te déconseille de passer par style pour modifier les dimensions du canevas. Du point de vue du moteur de rendu HTML, l'élément <canvas> a un comportement semblable à celui de <img>. Comme les images, il a des attributs HTML width et height, à ne pas confondre avec les styles du même nom. As-tu déjà essayé de modifier les styles width et height d'une image ? L'image est étirée (ou comprimée), et souvent avec un algorithme d'interpolation assez pauvre. Le résultat est moche. Si tu étires ton canevas, son contenu sera déformé de la même façon.

Morale de l'histoire : il faut modifier les attributs HTML directement. En plus, la syntaxe est plus simple :

Code JS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
canvas.width = 1200;
canvas.height = 1200;

Concernant ton problème, je pense que c'est simplement ta fonction init() qui est appelée trop tôt, alors que le DOM n'est pas construit. C'est un problème classique. Pour corriger ça, place ta balise <script> juste avant </body>, ou alors utilise document.addEventListener("DOMContentLoaded", …).

Conseil : pour mieux localiser tes erreurs, tu peux ajouter du code de sécurité, des throw qui indiquent quand quelque chose ne va pas :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
function getctx(){
	if(document.getElementById("canvas")){
		…
	} else {
		throw new Error("canvas introuvable :x");
	}
}

**progdebutant** · 14/02/2016, 20h01

Merci beaucoup Watilin pour tes conseils éclairés !

Pourtant j'avais mis ce code pour attendre que la page soit chargée :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

window.onload=init();

C'est bizarre, je vais suivre tes conseils déjà on verra après

**progdebutant** · 14/02/2016, 20h53

J'ai regardé cette page :
http://javascript.info/tutorial/onlo...mcontentloaded

Ils disent qu'avec Firefox y a problème avec ondomcontentloaded je crois non ?
Je sais pas si je comprend mal la page ou pas.

Du coup je suis bloqué si je veux pas mettre de script dans le body.

Mais c'est bizarre quand même car la méthode d'appel que j'ai utilisé fonctionne dans un autre programme.

Un window.onload qui appelle une fonction init() qui se charge d'appeler le lecteur de context du canvas. (tout comme j'ai fait).

**NoSmoking** · 14/02/2016, 21h28

Bonjour,
peut être que si tu nous mettais tout ton code on y verrait plus clair dans l'ordre d'appel et à quoi te servent ces multiples var ctx.

**Watilin** · 14/02/2016, 22h52

Ah bien vu Eric2a, j'étais en train de me creuser la tête

Envoyé par progdebutant

J'ai regardé cette page :
http://javascript.info/tutorial/onlo...mcontentloaded

Ils disent qu'avec Firefox y a problème avec ondomcontentloaded je crois non ?
Je sais pas si je comprend mal la page ou pas.

Ils disent simplement que Firefox ne remplit pas automatiquement les champs de formulaire avant cet évènement. Ça ne nous concerne pas dans le cas présent.

Sinon j'aime bien ton test de parité avec Math.round, je le trouve astucieux

Le canvas n'est pas trouvé sur ma page HTML [API HTML5]

JavaScript

Vue hybride

Discussions similaires

Partager

Partager