Perché lineTo() cambia i pixel interni?

Question

questa situazione è difficile da spiegare, quindi cerchiamo di illustrare con una foto:

quei pixel all'interno della prima forma creata sono alleggerite. Lo schermo viene cancellato con il nero, le caselle rosse e verdi sono disegnate, quindi il tracciato viene disegnato. L'unica soluzione che ho trovato finora è stata l'impostazione della larghezza della linea delle caselle a 2 pixel, per i motivi indicati here.

Ecco il codice utilizzato per disegnare le piazze:

sctx.save(); 
sctx.strokeStyle = this.color; 
sctx.lineWidth = this.width; 
sctx.beginPath(); 
sctx.moveTo(this.points[0].x, this.points[0].y); 
for (var i = 1; i < this.points.length; i++) 
{ 
    sctx.lineTo(this.points[i].x, this.points[i].y); 
} 
sctx.closePath(); 
sctx.stroke(); 
sctx.restore(); 

e le linee:

sctx.save(); 
sctx.strokeStyle = 'orange'; 
sctx.lineWidth = 5; 
console.log(sctx); 
sctx.beginPath(); 
sctx.moveTo(this.points[0].x, this.points[0].y); 
for (var i = 1; i < this.points.length; i++) 
{ 
    sctx.lineTo(this.points[i].x, this.points[i].y); 
} 
sctx.closePath(); 
sctx.stroke(); 
sctx.restore(); 

e una foto della stessa situazione in cui le scatole sono disegnati in larghezza 2px:

lineTo() forse ha problemi con i valori alfa? Qualsiasi aiuto è molto apprezzato.

MODIFICA: per chiarire, la stessa cosa si verifica quando viene omesso sctx.closePath(); dal percorso in corso.

Answer 1

Sembra che si tratti di un bug di rendering non documentato che per qualche motivo appare su tutte le piattaforme. Ci sono pochissime informazioni a riguardo, e si spera che vengano prese in considerazione prima che HTML5 sia lo standard ufficiale.

Come soluzione temporanea, non utilizzare lineTo(), utilizzare più set di linee singole.

Answer 2

Supponiamo di avere: http://jsfiddle.net/g3Kvw/ Come puoi vedere sembra essere largo 2px. Ma se lo cambi per usare fillRect() invece di lineTo(), hai http://jsfiddle.net/g3Kvw/1/ che sembra buono.

Problema: con questo metodo non è possibile disegnare qualcosa che non sia un rettangolo.

Ma se sommi 0,5 a OGNI coordinata int (x, y): http://jsfiddle.net/g3Kvw/3/ otterrai la linea regolare.

Penso che questa sia una sorta di bug di calcolo antialiasing su FF & webkit ... Ma non l'ho trovato nel bug tracker, e questa "strana" soluzione per convertire il numero in float, al fine di ottenere una linea continua è abbastanza confusa. Perché usare gli interi dovrebbe essere sufficiente.