Résolution de dessin HTML5 Canvas pour l'iPad "3

Question

J'ai joué avec l'iPad et HTML5 mais comme l'écran est retina, le texte sur mon écran semble être en basse résolution. Tout comme les lignes dessinées avec lineTo/moveTo/stroke. Notez que le texte est dessiné avec context.fillText()

Je pense que c'est simplement parce que je n'ai pas configuré le canevas correctement pour gérer le ratio de pixels rétina, donc j'espère que quelqu'un ici pourra trouver ce que je fais mal exactement.

J'ai configuré le canevas comme suit :

<div id="container">
    <canvas id="canvas"></canvas>
</div>

Avec les attributs CSS :

#canvas {
    width: 1024px; 
    height: 768px; 
}
#container {
    width: 1024px; 
    height: 768px; 
}

et en JavaScript (comme je l'ai vu faire sur internet) j'ai spécifié :

canvas.width = 2048;
canvas.height = 1536; 

Malheureusement, cela n'arrête pas la pixellisation comme cela a été le cas pour d'autres utilisateurs.

Ai-je oublié quelque chose ou ai-je mal spécifié quelque chose ?

Answer 1

Essayez d'ajouter cette ligne à l'en-tête de votre page :

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Cette balise permet de s'assurer que la page est affichée dans sa taille d'origine et qu'elle reste dans cette taille.