Tracciare la linea di pixel singolo in HTML5 canvas

Question

Quando provo a disegnare singolo pixel linea nera con il seguente codice:

context.strokeStyle = '#000'; 
    context.beginPath(); 
    context.moveTo(x1, y1); 
    context.lineTo(x2, y2); 
    context.lineWidth = 1; 
    context.stroke(); 
    context.closePath(); 

Ho più di una linea di pixel con bordo grigio. Come sistemarlo?

Ecco un esempio http://jsfiddle.net/z4VJq/

Answer 1

Chiamare la funzione con queste coordinate invece: drawLine(30,30.5,300,30.5);. Provalo in jsFiddle.

Il problema è che il colore sarà a un bordo, quindi il colore sarà a metà del pixel sopra il bordo e a metà del bordo. Se si imposta la posizione della linea nel mezzo di un numero intero, verrà disegnata all'interno di una linea di pixel.

Questa immagine (dal articolo collegato sotto) illustra che:

Si può leggere di più su questo su Canvas tutorial: A lineWidth example.