HTML5 tela ictus () di spessore e confusa

Question

Sto cercando di permettere all'utente di disegnare un rettangolo sulla tela (come una casella di selezione). Sto ottenendo alcuni risultati ridicoli, ma poi ho notato che anche solo cercando il codice dal mio riferimento qui , ottengo enormi linee sfocate e non so perché.

è ospitata presso dylanstestserver.com/drawcss . il javascript è in linea in modo da poter controllare. Sto usando jQuery per semplificare ottenere le coordinate del mouse.

Answer 1

Per qualche ragione, la tua tela è allungata. Perché hai sua proprietà width CSS impostata su 100%, si sta allungando da una sorta di dimensione originale. E 'la differenza tra utilizzando la proprietà CSS width e l'attributo width sul tag <canvas>. Si potrebbe provare a utilizzare un po 'di javascript per farlo riempire la finestra ( vedere 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

Il problema sfocata accadrà se si utilizzano i CSS per impostare l'altezza e la larghezza di tela invece di impostare l'altezza e la larghezza nell'elemento tela.

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

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

Answer 3

Il modo di farlo è impostare l'elemento tela per una larghezza e un'altezza nel css, e quindi impostare il canvas.width = canvas.clientWidth e canvas.height = canvas.clientHeight

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

Answer 4

Non hai indicato dimensioni dell'area di lavoro in pixel, quindi è scalato. E 'qui 300x150. Provare a impostare la larghezza, l'altezza

Answer 5

Il display Retina è anche bisogno di scala (in aggiunta alla risposta accettata):

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

Answer 6

Il problema css dimensionamento di cui questi commenti è corretto, ma un'altra cosa più sottile che può causare linee sfocate sta dimenticando di chiamare effettuare una chiamata a context.beginPath() prima di disegnare una linea. Senza mettere questo, si continua a ottenere una linea, ma non sarà levigata che rende gli sguardi di linea come una serie di passaggi.

Answer 7

Ho trovato il motivo per il mio era sfocata era che c'era una leggera discrepanza tra la larghezza in linea e la larghezza CSS.

Ho sia larghezza linea / parametri altezza e larghezza / altezza assegnato alla mia tela css, perché ho bisogno di mantenere la sua dimensione fisica statica, aumentando le sue dimensioni in linea per schermi retina.

Controlla vostro sono lo stesso se si dispone di una situazione come la mia.