細い線をキャンバスに描くことはできませんか？

Question

jsを使ってキャンバスグラフを作成するチュートリアルに従った。 iは1つの以上のソースを使用する場合、Iはxの値を列毎に算出される移動する..ポイントを保持する配列（xScaleは）、得られたグラフを用いてこの関数を呼び出してい

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

：コードプロットはこれですのデータが正常に表示されます。細かい作業スクリーンショット：私は2つの最後のデータ行を削除し、グラフは、グラフの最大値と最小値との差が小さいので、とき（のみ1ラインを離れるとき

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

しかし、それはこのように現れる：

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

それはあなたが、それは線を引くべきであることを、はっきりと見ることができ、このスクリーンショットにあるが、ラインは非常に（ひどく）歪んだラインのように、実際に1pxのラインが、形状ではないでしょうか？

私は何か間違っているのか、何かを無視しているのかどうか分からないのですか？キャンバスの高さは固定されており、常に次のように計算されます。

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

ありがとう！

（正確なチュートリアルから）正確な効果のCodepenがここで見つけることができる：

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

（iはコメントアウトとそうすることで、私はVal_maxしたグラフデータの2つの以上の行がある気づきますそしてあなたは、この行の後に、すべての操作にY軸を伸ばしているVal_min Yラインのデータ「ストレッチ」に異なるvarsの）

Answer 1

：

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

代わりに、上の行を削除し、plotData()に線を描画するときにyの値を掛けます。

// 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); 
}