HTML5, Leinwand und StrokeRect: Linien schmaler?

Question

Eine dumme einfache Leinwand Nutzung:

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

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

ein Rechteck mit schmaleren Linien entlang Spitzenrenditen und links:

Warum passiert das? Muss ich mit Padding ausgleichen? Es ist nervig.

Answer 1

2 Dinge.

Erstens werden ungerade Zeilenbreiten (1, 3, 5, ...) niemals sauber mit auf ganzzahligen Pixelwerten gezeichnet. Dies liegt daran, dass sich X und Y auf den Abstand zwischen Pixeln und nicht auf deren Mittelpunkt beziehen. Ein Strich von 1, der von [1,1] bis [1,10] verläuft, wird also halb in das Pixel auf der linken Spalte von Pixeln und in die Hälfte in die rechte Spalte übertragen. Wenn Sie stattdessen diese Linie von [1,5,1] bis [1,5,10] zeichnen, füllt sie die Hälfte nach links und die Hälfte nach rechts und füllt die ganze Pixelspalte perfekt aus.

Jede ungerade Zahl Breite wird dieses Verhalten zeigen, aber auch Zahlen nicht, weil sie ein volles Pixel auf jeder Seite suchen sauber zu füllen.

---

Zweitens ist die Box durch den oberen Rand der Leinwand verdeckt. Wenn Sie Ihren 3px-Strich auf [0,0] zentrieren, wird er so weit oben und links wie [-1.5, -1.5] ausgegeben, was außerhalb des sichtbaren Bereichs der Leinwand liegt. So erscheint es halb so dick wie es sein sollte.

---

Siehe den Beweis Unterschied hier: http://jsfiddle.net/F4cqk/2/

Die erste wie Ihr Code. Die zweite wird von der oberen linken Kante weg bewegt, um ihre gleichmäßige Breite zu zeigen. Und die dritte zeigt, wie man einen 3px-Strich ohne Subpixel-Unschärfe rendert.

Answer 2

Weil du ihm gesagt, eine Linie mit der Breite von 3 auf 0 zu ziehen ... so 1/3 davon wird aus der Leinwand sein ...

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