Canvas, images et chemin

[Résolu/Fermé]
Signaler
-
Messages postés
2
Date d'inscription
vendredi 26 juin 2015
Statut
Membre
Dernière intervention
26 juin 2015
-
Bonjour a tous, je suis un absolu débutant et je vais sans doute poser la question de l'année, mais comme le ridicule ne tue pas...

Je veux afficher une image avec "canvas", j'ai récupéré ça
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>test image</title>
<script type="text/javascript">
</script>
<style>body { background: black; } canvas { background: white; }</style>
</head>

<body>

<canvas id="canvas" width="150" height="150">
<p>Désolé, votre navigateur ne supporte pas Canvas. Mettez-vous à jour</p>
</canvas>

<script>

window.onload = function() {
var canvas = document.querySelector('#canvas');
var context = canvas.getContext('2d');

var zozor = new Image();
zozor.src = 'grue.png';
zozor.onload = function() {
context.drawImage(zozor, 35, 35);
}
};

</script>
</body>
</html>


ou "grue.png" est dans le même dossier que ma page

ça ne marche pas, comment dois-je indiquer le chemin d'acces à l'image ? et y'a t-il un moyen simple de savoir pourquoi ça ne marche pas (genre console avec message d'erreurs) ?

3 réponses


Bonjour

Ça a l'air correct, et chez moi ça marche (avec Chrome,FF et IE)

Tu peux regarder dans la console javascript (avec F12) s'il y a des erreurs.
Je confirme ça ne marche pas chez moi sur firefox, chrome et IE.
Le fichier grue.png est dans le même dossier que la page html.
Le chemin spécifié dans le code est donc correct ?

Si quelqu'un à une idée...
Messages postés
2
Date d'inscription
vendredi 26 juin 2015
Statut
Membre
Dernière intervention
26 juin 2015

je reponds tout seul, en fait ça marche, c'est juste que je testais avec une image avec beaucoup de blanc et comme la taille du canvas est petite et mon image grande, je ne voyais pas que l'image s'affichait.
merci.