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.

**progdebutant** · 14/02/2016, 21h43

Ce que j'ai mis est ce qui a trait à l'erreur le reste n'a rien à voir, c'est de la création d'objets.

Voilà mon code complet mais je vois pas ce que ça change par rapport à ce que j'ai déjà mis :/
L'erreur ctx indéfini est en ligne "ctx.fillStyle..."

Code :

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

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
 
function getctx(){
	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;
	}	
}
 
// Dessine un carré beu
function bleu(x1,y1,x2,y2){
	var ctx=getctx();
	ctx.fillStyle='blue';
	ctx.fillRect(0,0,40,40);
}
 
function init(){
	var plateau=[];
	var pion=new Image();
	pion.src="";
	for(i=0;i<8;i++){
		plateau[i]=[];
		for(j=0;j<8;j++){
			var x1=j*150;
			var x2=x1+150;
			var y1=i*150;
			var y2=y1+150;
			bleu(20,30,60,60);
			if(i==0){
				tank.couleur=1;
				if(Math.round(j/2)*2!=j){
					plateau[i][j]=tank;
					pion.src="noir.png";
				}	
			}else
			if(i==7){
				tank.couleur=2;
				if(Math.round(j/2)*2==j){
					plateau[i][j]=tank;
					pion.src="blanc.png";
				}
			}else
			{
				plateau[i][j]=car;
			}
			var ctx=getctx();
			ctx.drawImage(pion,x1,y1);
		}
	}
}
 
// Début du programme
window.onload=init();

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

Code :

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

1
2
if (document.getElementById('canvas')){	
    var canvas=document.getElementById("canvas");

tu ne rentres pas dans le if

tu devrais écrire

Code :

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

1
2
var canvas=document.getElementById("canvas");
    if( canvas){

ou

Code :

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

if( canvas=document.getElementById("canvas")){

**progdebutant** · 14/02/2016, 22h14

Merci NoSmoking je vais essayer ta 2 eme version !
C'est bizarre pourtant ma méthode fonctionne dans un autre programme j'ai juste copié/collé cette partie-là, celle du getContext().

EDIT : Même erreur quand je fais ça :

Code :

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

1
2
3
4
5
6
7
8
9
10
// Fonction de lecture du contexte du canvas, renvoie le contexte.
function getctx(){
	if( canvas=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;
	}	
}

J'ai essayé aussi en enlevant les traits de commentaire.

Cette ligne me dit canvas non défini :

Code :

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

if(canvas==document.getElementById("canvas")){

**progdebutant** · 14/02/2016, 22h25

Avec ta première version de canvas, j'ai la même erreur qu'à mon début.

Code :

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

1
2
3
4
5
6
7
8
9
// Fonction de lecture du contexte du canvas, renvoie le contexte.
function getctx(){
	var canvas=document.getElementById("canvas");
    if( canvas){
		//var canvas=document.getElementById("canvas");
		var ctx=canvas.getContext("2d");
		return ctx;
	}	
}

**Eric2a** · 14/02/2016, 22h33

Salut,

Concernant la ligne

Code :

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

window.onload=init();

Les parenthèses sont en trop car ces dernières enclenchent l'appel à la fonction. Alors que nous avons besoin de sa référence.

Code :

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

window.onload=init;

**progdebutant** · 14/02/2016, 22h41

Ah ? Merci je vais tester !

ça marche !!!!!!!!!!!!!!!!

Merci Eric2a c'est super !
J'ai comparé avec un autre programme d'où j'ai copié le getContext et c'est vrai que lui aussi utilise le init sans les parenthèses c'est pour ça qu'il fonctionne et pas ce programme-ci :/

Merci encore à vous deux pour votre aide et bonne soirée !

**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