¿Por qué lineTo() cambia los píxeles interiores?

Question

Esta situación es difícil de explicar, así que vamos a ilustrar con una imagen:

los píxeles dentro de la primera forma creada se aclaran. La pantalla se borra con negro, se dibujan los cuadros rojo y verde, luego se dibuja la ruta. La única solución que he encontrado hasta ahora fue establecer el ancho de línea de los cuadros a 2 píxeles, por los motivos descritos here.

Aquí está el código que se utiliza para dibujar las plazas:

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

y las líneas:

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

y una imagen de la misma situación en la que las cajas se extraen al ancho de 2 píxeles:

¿Está lineTo() jugando con los valores alfa? Cualquier ayuda es muy apreciada.

EDITAR: Para aclarar, ocurre lo mismo cuando se omite sctx.closePath(); en la ruta que se está dibujando.

Answer 1

Parecería que se trata de un error de representación actualmente no documentado que, por alguna razón, aparece en todas las plataformas. Hay muy poca información al respecto, y con suerte será atendido antes de que HTML5 sea el estándar oficial.

Como solución alternativa, no utilice lineTo(), use varios conjuntos de líneas simples.

Answer 2

Digamos que tiene: http://jsfiddle.net/g3Kvw/ Como puede ver, parece tener 2px de ancho. Pero si cambia eso para usar fillRect() en lugar de lineTo(), tiene http://jsfiddle.net/g3Kvw/1/ que se ve bien.

Problema: con este método no podrá dibujar algo que no sea un rectángulo.

Pero, si sumas 0.5 a CADA coordenada int (x, y): http://jsfiddle.net/g3Kvw/3/ obtendrás la línea regular.

Creo que esto es algún tipo de error de cálculo antialiasing en FF & webkit ... Pero no lo encontré en el rastreador de errores, y esta solución "extraña" para convertir el número a flotación, con el fin de obtener una línea sólida es bastante confusa. Porque usar enteros debería ser suficiente.