HTML5 toile AVC() épais et floue

Question

J'essaye de permettre à l'utilisateur de dessiner un rectangle sur la toile (comme une boîte de sélection). Je reçois des résultats ridicules, mais ensuite j'ai remarqué que même en essayant le code de ma référence here, j'obtiens des lignes floues énormes et je ne sais pas pourquoi. Il est hébergé à dylanstestserver.com/drawcss. le javascript est en ligne donc vous pouvez le vérifier. J'utilise jQuery pour simplifier l'obtention des coordonnées de la souris.

Answer 1

Pour une raison quelconque, votre toile est étirée. Parce que vous avez sa propriété css width définie sur 100%, il l'étire à partir d'une sorte de taille native. C'est la différence entre l'utilisation de la propriété css width et l'attribut width sur la balise <canvas>. Vous voudrez peut-être essayer d'utiliser un peu de javascript pour faire remplir la fenêtre (see jQuery .width()):

jQuery(document).ready(function(){ 
    var canvas = document.getElementById('drawing'); 
    canvas.width(($(window).width()).height($(window).height()); 
    var context = canvas.getContext('2d'); 
    //... 

Answer 2

Vous n'avez pas la taille de la toile indiquée en pixels, il est donc plus grande échelle. C'est 300x150 ici. Essayez de définir la largeur, la hauteur

Answer 3

Le problème flou se produira si vous utilisez css pour définir la hauteur et la largeur du canevas au lieu de définir la hauteur et la largeur dans l'élément canevas.

<style> 
    canvas { height: 800px; width: 1200px; }  WRONG WAY -- BLURRY LINES 
</style> 

<canvas height="800" width="1200"></canvas>  RIGHT WAY -- SHARP LINES 

Answer 4

Sur la rétine vous affiche devez également à l'échelle (en plus de la réponse acceptée):

var context = canvas.getContext('2d'); 
context.scale(2,2); 

Answer 5

Je trouve la mine raison était floue était qu'il y avait une légère différence entre la largeur de ligne et la largeur CSS. J'ai les deux paramètres largeur/hauteur en ligne ET largeur css/hauteur assignés à ma toile, car je dois garder ses dimensions physiques statiques, tout en augmentant ses dimensions en ligne pour les écrans rétiniens.

Vérifiez les vôtres sont les mêmes si vous avez une situation comme la mienne.

Answer 6

Le problème de dimensionnement css mentionné dans ces commentaires est correct, mais une autre chose plus subtile qui peut provoquer des lignes floues est l'oubli d'appeler context.beginPath() avant de tracer une ligne. Sans appeler ceci, vous obtiendrez toujours une ligne, mais elle ne sera pas lissée ce qui rend la ligne ressemblant à une série d'étapes.

Answer 7

La façon dont je fais est de fixer l'élément de toile à une largeur et une hauteur dans la css, puis régler la canvas.width = canvas.clientWidth et canvas.height = canvas.clientHeight

var canvas = document.getElementById("myCanvas"); 
canvas.width = canvas.clientWidth; 
canvas.height = canvas.clientHeight; 
var context = canvas.getContext("2d");