Mauvais rendu balise Canvas

**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

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.

Mauvais rendu balise Canvas [HTML 5]

HTML

Vue hybride

Discussions similaires

Partager

Partager