course de toile HTML5 () d'épaisseur et floue

Question

Je suis en train 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 je remarque que même juste essayer le code de ma référence , Je reçois d'énormes lignes floues et ne sais pas pourquoi.

il est hébergé dylanstestserver.com/drawcss . le javascript est en ligne de sorte que vous pouvez vérifier. J'utilise jQuery pour simplifier obtenir les coordonnées de la souris.

Answer 1

Pour une raison quelconque, votre toile est tendue. Parce que vous avez la propriété width définie sur css 100%, il est l'étirant d'une sorte de taille native. Il est la différence entre l'utilisation de la propriété css width et l'attribut width sur l'étiquette <canvas>. Vous voudrez peut-être essayer d'utiliser un peu de javascript pour faire remplir la fenêtre ( voir 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

Le problème flou se produit si vous utilisez css pour régler la hauteur et la largeur de la toile au lieu de définir la hauteur et la largeur de l'élément de toile.

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

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

Answer 3

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");

Answer 4

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

Answer 5

Sur la rétine vous affiche aussi besoin d'échelle (en plus de la réponse acceptée):

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

Answer 6

La question de dimensionnement css mentionné dans ces commentaires est correct, mais une autre chose plus subtile qui peut causer des lignes floues est d'appeler faire oublier un appel à context.beginPath() avant de tracer une ligne. Sans appeler cela, vous obtiendrez toujours une ligne, mais il ne sera pas lissé qui rend les regards de ligne comme une série d'étapes.

Answer 7

Je trouve la raison pour laquelle la mienne était floue était qu'il y avait une légère différence entre la largeur de ligne et la largeur CSS.

J'ai deux paramètres largeur de ligne / hauteur et la largeur css / hauteur affectée à ma toile, parce que je dois garder ses dimensions physique statique, tout en augmentant ses dimensions inline pour les écrans de la rétine.

Vérifiez la vôtre même si vous avez une situation comme la mienne.