<canvas> L'image copiée sur le canvas à partir d'un fichier png est affichée zoomée
Bonjour,
J'utilise pour dessiner sur le canvas la commande classique :
Code:
1
2
3
4
5
6
7
8
9
10
11
|
var fond=new Image();
fond.style.width="4000px";
fond.style.height="2000px";
fond.style.display="block";
fond.src="../images/guiness.png";
var canvas=document.getElementById('canvas');
var ctx=canvas.getContext("2d");
var x=0,y=0;
ctx.drawImage(fond,x,y,600,600,0,0,600,300); |
L'image source est d'une taille de 4000px par 2000px.
L'image source est d'abord chargée en mémoire puis je fais une copie d'une portion commençant à 0,0 et de taille 600x600 mais le résultat sur le canvas est une image agrandie, et en plus déformée en hauteur.
La copie doit avoir la même taille, c'est à dire 600,600 hors il y a deux défauts quand j'utilise la commande :
1) La hauteur de la copie est le double de la largeur donc : image déformée en hauteur.
D'où le fait que j'ai mis 300 à la place de 600 pour corriger le visu (ce que je ne devrais pas avoir à faire).
2) La copie est zoomée par rapport à l'image originale qui elle, est très fine. Je ne sais pas d'où vient le fait que la copie d'une portion d'image se retrouve zoomée sur le canvas, puisque je lui garde les mêmes dimensions.
Mon fichier css comporte juste ça :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| body{
position:absolute;
overflow:hidden;
left:0;
top:0;
margin:0;
width:100%;
height:100%;
}
canvas{
position:absolute;
left:30px;
top:30px;
width:600px;
height:600px;
background: black;
display:block;
} |
Quelqu'un saurait d'où vient ce zoom non voulu ?
Et la déformation en hauteur, du double de la largeur.
EDIT :
Pour les besoins d'une explication claire de mon problème je nettoie ma première version du problème !
Vala c'est fait !
