Kann dünne Linie in Canvas nicht zeichnen?

Question

Ich folgte einem Tutorial, um ein Canvas-Diagramm mit js zu erstellen. Der Code Plotten ist dies:

function plotData(context, dataSet, sections, xScale) { 
    context.lineWidth = 1; 
    context.outlineWidth = 0; 
    context.strokeWidth = 0; 
    context.beginPath(); 
    context.moveTo(0, dataSet[0]); 
    for (i=0; i<sections; i++) { 
     context.lineTo(i * xScale, dataSet[i]); 
    } 
    context.stroke(); 
} 

ich diese Funktion anzurufenden mit einem Array mit den Punkten Betrieb, in dem Wert gehen .. Der x berechnet pro Spalte (xScale) und die daraus resultierende Diagramm, wenn ich mehr als 1 Quelle verwenden von Daten zeigt sich gut. Screenshot beim Arbeiten fein:

http://s21.postimg.org/vlc1qg9iv/Screen_Shot_2016_04_08_at_15_48_42.png

Aber wenn ich die 2 letzten Datenleitungen entfernen und nur 1 Zeile (so verlassen, wenn die Kurve, die eine kleinere Differenz zwischen Graph max und min hat Werte, die sie zeigt, wie auf dem Punkt:

http://s16.postimg.org/ex0fakef9/Screen_Shot_2016_04_08_at_15_44_21.png

es ist in diesem Screenshot, dass man deutlich sehen kann, dass es zwar eine Linie ziehen soll, ist die Linie nicht wirklich eine 1px Linie, sondern eine Form, ähnlich wie eine (schlecht) verzerrt Linie?

Ich bin mir nicht sicher, ob ich etwas falsch mache oder ob ich etwas einfach ignoriere. Die Höhe der Leinwand ist fest und wird immer berechnet mit:

canvas = $('#canvas-container canvas')[0]; 
canvas.width = $('#canvas-container').width() * 0.9; 
canvas.height = $('#canvas-container').width()/1.45; 

Vielen Dank!

Codepen der genaue Effekt (aus exakt Tutorial) sind hier zu finden:

https://codepen.io/anon/pen/JXMwBy?editors=1111

(Hinweis Es sind 2 weitere Linien von Diagrammdaten i kommentiert und so machte ich die Val_max dabei und Val_min vars verschiedene zu „strecken“, die Daten in der Y-Linie)

Answer 1

Du Recken die Y-Achse auf jeder Operation nach dieser Zeile:

context.scale(1,-1 * yScale); 

Entfernen Sie stattdessen die obige Zeile und multiplizieren Sie die y-Werte, wenn Sie die Linie in plotData() zeichnen.

// multiply all Y values by -yScale to flip and scale 
context.moveTo(0, dataSet[0] * -yScale); 
for (i=1;i<sections;i++) { 
    context.lineTo(i * xScale, dataSet[i] * -yScale); 
}