Code ne fonctionnant pas

**garlinux** · 29/10/2021, 17h42

Bonjour à tous,
C'est mon premier post "programmation" ici.
Je commence à m'autoformer à HTML/CSS, j'ai acheté un bouquin pour ça, "Premiers pas en HTML5 et CSS3".
Cependant, je n'arrive pas à afficher le rectangle vert , ce que devrait faire le code ci-dessous (page 81 du bouquin, qui n'est pas toujours très clair).
Pouvez-vous éclairer ma lanterne svp ? Merci d'avance

Code html :

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
<!DOCTYPE html>
<html lang="Fr">
<head>
<meta charset="utf-8">
<title>Mon blog de tests</title>
</head> 
<body>
<script>
function fonction_canvas()
{
        var balise_canvas = document.getElementById('image1');
        if (balise_canvas.getContext) {
            var context2D = balise_canvas.getcontext('2D');
            context2D.fillStyle = "rgb(0,220,0)";
 
            context2D.fillRect (50,10,150,100);
        }
}
window.onload = fonction_canvas;
</script>
 
<h3>Voici un rectangle vert</h3>
<canvas id="image1">
    Votre navigateur ne peut pas afficher cet élément
</canvas>
</body>
</html>

**garlinux** · 29/10/2021, 17h54

Je découvre également Visual Studio Code, et la console de déboggage m'affiche :

Uncaught TypeError: balise_canvas.getcontext is not a function
Uncaught TypeError: balise_canvas.getcontext is not a function
Uncaught TypeError: balise_canvas.getcontext is not a function

J'en déduis que le problème vient de balise_canvas.getContext , mais c'est bien ce qui est écrit dans mon bouquin ...

**garlinux** · 29/10/2021, 17h58

Je viens de remplacer getcontext par getContext, je n'ai plus de message d'erreur, mais le code de fonctionne toujours pas, pas de rectangle vert à l'écran

**jreaux62** · 29/10/2021, 18h07

Bonjour,

en JS, il est très important de respecter la casse (majuscule / minuscule).

voir : HTMLCanvasElement.getContext()

getcontext -> getContext
2D -> 2d

Code js :

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

            var context2D = balise_canvas.getContext('2d');

CONSEIL :

NE JAMAIS HÉSITER A FAIRE UNE RECHERCHE,
et à CONSULTER LA DOC pour trouver la syntaxe correcte.

**garlinux** · 29/10/2021, 18h10

Super ! ça fonctionne !

Merci beaucoup pour ta réponse !!!

Code ne fonctionnant pas

JavaScript

Discussions similaires

Partager

Partager