キャンバスオブジェクトは常に他のオブジェクトの背後に描画します

Question

Im HTMLキャンバスを使用してグラフを描画します。私は水平ラインと各ラインのラベルを持っています。しかし、ラベルは常に2番目の線であるにもかかわらず、ラインの後ろに表示されます。コードは

function paintGrid(canvas, context) { 

    var xSegment = 200/5, 
     ySegment = 200/5; 

    var color = '#EEE'; 

    // DRAW GRID 
    context.fillStyle = color; 
    context.strokeStyle = color; 
    context.lineWidth = 5; 

    for (var y = 0; y < 5; y++) { 
     context.moveTo(0, (y * ySegment)); 
     context.lineTo(200, (y * ySegment)); 
     context.stroke(); 
    } 


    // LABELS 
    context.font = "9pt Arial"; 
    context.fillStyle = '#000'; 

    var ySeg = canvas.height/5; 
    var xSeg = canvas.width/5; 
    var yLabel, xLabel, zeroLabel; 

    for (var y = 1; y < 5; y++) { 

     yLabel = (ySegment * y).toFixed(1); 

     context.fillText(yLabel, 5, (canvas.height - (ySeg * y))); 
     context.stroke(); 
    } 
} 

です。フィドルはhereです。

ご覧のとおり、ラベルはラインの後ろにあります。それは、どのような順序で描いても問題ありません。最初の行または最初のラベルは、常に後ろに表示されます。なぜこうなった？

Answer 1

もう一度strokeに電話しています。 strokeは、最初のforループで生成した現在のパスを描画します。私が何を意味するかを確認するには、ループforの外側にcontext.stroke()を移動してください。あなたはあなたが望む線を得るでしょう。

for (var y = 0; y < 5; y++) { 
    context.moveTo(0, (y * ySegment)); 
    context.lineTo(200, (y * ySegment)); 
    // context.stroke(); 
} 
context.stroke(); 

同様に、あなたはfillText後stroke()を呼び出す必要はありません。 2番目のループから完全に削除します。

for (var y = 1; y < 5; y++) { 
    yLabel = (ySegment * y).toFixed(1); 
    context.fillText(yLabel, 5, (canvas.height - (ySeg * y))); 
} 

注意：この複数回呼び出すするつもりならば、それは新しいパスを開始し、古いパスを再描画を避けるためにbeginPathを使用するのが賢明だろう。

context.beginPath(); 
for (var y = 0; y < 5; y++) { 
    context.moveTo(0, (y * ySegment)); 
    context.lineTo(200, (y * ySegment)); 
    // context.stroke(); 
} 
context.stroke();