HTML5, canvas e strokeRect: linee più strette?

Question

uno stupido semplice utilizzo tela:

var canvas = document.getElementById("canvas"); 
var ctx = canvas.getContext("2d"); 

ctx.strokeStyle = "#CCCC00"; 
ctx.lineWidth = 3; 
ctx.strokeRect(0, 0, width, height); 

produce un rettangolo con linee strette lungo superiore e sinistro:

Perché accade questo? Devo compensare con il padding? È fastidioso.

Answer 1

2 cose.

Primo, le linee dispari (1, 3, 5, ...) non verranno mai applicate in modo pulito con valori di pixel interi disegnati. Questo perché X e Y si riferiscono allo spazio tra i pixel piuttosto che i loro centri. Quindi un colpo di 1 che va da [1,1] a [1,10] si riversa a metà nel pixel sulla colonna sinistra di pixel e metà a destra. Se invece si disegna quella linea da [1,5,1] a [1,5,10], si riempie a metà a sinistra e a metà a destra, riempiendo perfettamente l'intera colonna di pixel.

Qualsiasi larghezza di numero dispari mostrerà questo comportamento, ma i numeri pari non lo saranno perché riempiono un pixel intero su ciascun lato apparentemente pulito.

---

In secondo luogo, la casella è oscurata dalla parte superiore della tela. Quando si centra il colpo di 3px su [0,0], si rovescia fino a sinistra e in alto come [-1.5, -1.5] che si trova al di fuori dell'intervallo visibile dell'area di disegno. Quindi sembra mezzo grosso come dovrebbe essere.

---

Vedi la prova della differenza qui: http://jsfiddle.net/F4cqk/2/

Il primo è come il vostro codice. Il secondo viene spostato dal bordo in alto a sinistra per mostrare la sua uniforme in larghezza. E il terzo mostra come rendere un tratto 3px senza sfocatura subpixel.

Answer 2

Perché hai detto che per disegnare una linea con la larghezza di 3 a 0 ... quindi 1/3 ° di esso sta per essere il vostro tela ...

http://jsfiddle.net/mhFLG/ vs http://jsfiddle.net/mhFLG/1/