Discussion :

[dragonno]

Bonjour,
J'utilise la fonction draw du contexte canvas HTML5 et j'ai une erreur.

j'ai un tileset (de 128 x 512 px)dans une image temporaire en mémoire qui se nomme "imgset" et la fonction ctx.draw y copie une portion de 32x32 pixels pour la coller sur le canvas.

Résultat :

- L'image collée fait un peu plus que 96px en hauteur au lieu de 32px que j'ai précisé dans la fonction draw().
- L'image collée fait aussi 16px de plus en largeur que les 32px que j'ai précisé dans la fonction.

Donc, l'image collée sur le canvas est plus grande en hauteur et en largeur que ce que j'ai demandé dans la fonction.
Savez-vous d'où cela peut venir ?

Code :

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

1
2
3
4
/* Fonction javascript où ctx est le contexte du canvas.
Pour rappel : 
ctx.draw(imagesource, Xsource, Ysource, W_source, H_source, Xdest, Ydest, W_dest, H_dest) */
ctx.drawImage(imgset,imgX,imgY,32,32,0,0,32,32);

Code css :

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
/* Style CSS du canvas et du DIV qui est pardessus et contenant une grille au pas de 32x32 en background.*/
canvas
{
position:absolute;
left:0px;
top:0px;
margin:0px;
padding:0px;
width:480px;
height:480px;
background-color:cyan;
display:block;
background-repeat: no-repeat;
}
 
#grille
{
position:absolute;
left:0px;
top:0px;
margin:0px;
padding:0px;
background-repeat: no-repeat;
background-image:url(grille.png);
display:block;
width:480px;
height:480px;
}

A l'écran, j'ai bien ma grille par dessus le canvas, je ne pense pas que ce soit elle qui fasse problème.
Mais l'image collée par ctx.draw() sur le canvas est trop déformée en largeur et hauteur.
La position de l'image collée sur le canvas se colle parfaitement en 0,0.

EDIT :

Si je rajoute :

Code :

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

ctx.drawImage(imgset,32,0); // Affiche imgset en x=32 et y=0.

Juste avant le draw de copie ....ça donne ça :

Code :

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

1
2
ctx.drawImage(imgset,32,0);
ctx.drawImage(imgset,imgX,imgY,32,32,0,0,32,32);

je m'apperçois alors que mon image source imgset est positionnée par le premier drawImage() en 32+16,0 alors que j'ai demandé 32,0 et elle est aussi agrandie.
Donc je pense que ça doit être le canvas qui est en cause ?

PS : Merci Bovino pour la modération^^

[Invité]

bonjour

il ne faut pas definir la hauteur et la largeur d'un canvas avec le css mais directement dans la balise canvas avec les attributs height et width il y a de forte chance que ce soit la cause du probleme

[dragonno]

Aaaaaaaah !
Merci beaucoup mekal ! Je vais voir ça, c'est sûrement ça

Bravo ! ça marche
Tu me sauve