[HTML 5] Mauvais rendu balise Canvas [Résolu]

liryks_6 · 25/05/2011, 14h24

Bonjour,

Je travail actuellement sur une application faisant appel à la balise canvas.
Lorsque j'ajoute une image dans la balise, le rendu est vraiment mauvais, je ne comprend pas pourquoi.

Quelqu'un aurait-il la solution?

Je vous passe mon bout de code et une image qui représente la mauvaise qualité du rendu.

le code

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
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
        <link rel="stylesheet" type="text/css" href="css/generalcss.css" />
        <script>
            $(document).ready(function(){
                var canvas = document.getElementById("canvas");
                var ctx = canvas.getContext("2d");
 
                var img = new Image();
                img.src = 'images/motifs/default/0372af.png ';
                img.onload = function(){
                    ctx.drawImage(img, 0, 0,canvas.width,canvas.height);
                    ctx.fill();
                }
            })
        </script>
    </head>
    <body>
        <canvas id='canvas'></canvas>
    </body>
</html>

Bovino · 25/05/2011, 14h43

Ben manifestement, ton image est juste agrandie et du coup, elle est moins précise...
C'est quoi les dimensions réelles de l'image ?

liryks_6 · 25/05/2011, 15h35

Malheureusement ce n'est pas ça...
Du moins je crois.
Les dimensions de ma balise canvas sont identiques à celles de mon image... Il n'y a donc pas de redimensionnement. Sauf si canvas en fait un à mon insu ?!?

liryks_6 · 25/05/2011, 21h02

Au faite je viens de constater un problème! J'ai défini dans ma css que mon élément canvas devait faire 492px par 370px. Mais lorsque j'affiche avec mon script canvas.widht et canvas.height c'est 300 et 150 qui apparaisse! A ne rien y comprendre

thelvin · 30/05/2011, 01h23

Citation:

Envoyé par liryks_6

Au faite je viens de constater un problème! J'ai défini dans ma css que mon élément canvas devait faire 492px par 370px. Mais lorsque j'affiche avec mon script canvas.widht et canvas.height c'est 300 et 150 qui apparaisse! A ne rien y comprendre

C'est simple : le buffer logique, l'emplacement mémoire sur lequel tu peux dessiner une image raster et dont la taille n'est exprimable qu'en pixels modifiables, fait 300 pixels sur 150 pixels. Probablement la taille indiquée dans le HTML ou une taille par défaut.

Quand ce buffer est projeté sur ta page HTML, dont les dimensions peuvent être exprimées en pixels, en centimètres, en unité relative à la taille disponible, ou en unité relative à la taille du texte, ce sont les CSS qui décident la taille à laquelle ce buffer va être projeté. Par défaut c'est en pixels et c'est la taille intrinsèque du canvas... Mais si les CSS disent autre chose, forcément...
Là tu as demandé aux CSS d'afficher à 492 pixels par 370 pixels, alors que le buffer du canvas fait 300 par 150.
D'où, mauvais rendu.

Les CSS sont une techno de présentation, et n'ont pas à décider de la taille d'un buffer de raster modifiable en mémoire.

liryks_6 · 30/05/2011, 10h34

Ok, merci pour ta réponse.

25/05/2011, 14h43	#2
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 807 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 807 Points : 35 803 Points : 35 803	Ben manifestement, ton image est juste agrandie et du coup, elle est moins précise... C'est quoi les dimensions réelles de l'image ? __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

25/05/2011, 15h35	#3
liryks_6 Candidat au titre de Membre du Club Étudiant Inscription : mai 2011 Messages : 47 Détails du profil Informations personnelles : Sexe : Localisation : Suisse Informations professionnelles : Activité : Étudiant Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : mai 2011 Messages : 47 Points : 14 Points : 14	Malheureusement ce n'est pas ça... Du moins je crois. Les dimensions de ma balise canvas sont identiques à celles de mon image... Il n'y a donc pas de redimensionnement. Sauf si canvas en fait un à mon insu ?!?
	00

25/05/2011, 21h02	#4
liryks_6 Candidat au titre de Membre du Club Étudiant Inscription : mai 2011 Messages : 47 Détails du profil Informations personnelles : Sexe : Localisation : Suisse Informations professionnelles : Activité : Étudiant Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : mai 2011 Messages : 47 Points : 14 Points : 14	Au faite je viens de constater un problème! J'ai défini dans ma css que mon élément canvas devait faire 492px par 370px. Mais lorsque j'affiche avec mon script canvas.widht et canvas.height c'est 300 et 150 qui apparaisse! A ne rien y comprendre
	00

30/05/2011, 10h34	#6
liryks_6 Candidat au titre de Membre du Club Étudiant Inscription : mai 2011 Messages : 47 Détails du profil Informations personnelles : Sexe : Localisation : Suisse Informations professionnelles : Activité : Étudiant Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : mai 2011 Messages : 47 Points : 14 Points : 14	Ok, merci pour ta réponse.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email