Последняя строка, нарисованная в javascript, не похожа на остальные

Question

У меня есть проблема с номером <canvas>, в которой этот сегмент моего кода, который рисует музыкальные ноты на холсте, всегда делает последнюю линию ярче и почти исчезает, независимо от того, что используется браузер.

window.onload = draw; 

function draw() { 
    var canvas = document.getElementById('sheetmusic'); 
    var c = canvas.getContext('2d'); 
    var whitespace = 0; // pixel space between staves 
    var ycoordinate = 10; // y-plot of beginning of each staff 

    //draw the staves 'x' number of times requested 
    for (var x = 1; x <= 10; x++) { 

     // draw the staff 
     for (var i = 1; i <= 5; i++){ 
      c.strokeStyle = 'black'; 
      c.moveTo(0,ycoordinate); 
      c.lineTo(canvas.width,ycoordinate); 
      c.stroke(); 
      ycoordinate = ycoordinate + 10; 
     } 

     //draw white space beneath each staff 
     c.fillStyle = 'white'; 
     c.fillRect(0,whitespace + 52,canvas.width,45); 
     whitespace = whitespace + 100; 
     ycoordinate = ycoordinate + 50; 

    } 
} 

Решения у меня есть, так как я использовал цикл, чтобы рисовать линии, чтобы перерисовывать каждую строку один раз, когда на самом деле все, что мне действительно нужно это сделать самую последнюю строчку еще раз.

window.onload = draw; 

    function draw() { 
     var canvas = document.getElementById('sheetmusic'); 
     var c = canvas.getContext('2d'); 
     var whitespace = 0; // pixel space between staves 
     var ycoordinate = 10; // y-plot of beginning of each staff 

    //draw the staves 'x' number of times requested 
    for (var x = 1; x <= 10; x++) { 

     // draw the staff 
     for (var i = 1; i <= 5; i++){ 
      c.strokeStyle = 'black'; 
      c.moveTo(0,ycoordinate); 
      c.lineTo(canvas.width,ycoordinate); 
      c.stroke(); 
      // this code repeats to alleviate bug with last drawn line not being defined enough 
      c.moveTo(0,ycoordinate); 
      c.lineTo(canvas.width,ycoordinate); 
      c.stroke(); 
      ycoordinate = ycoordinate + 10; 
     } 

     //draw white space beneath each staff 
     c.fillStyle = 'white'; 
     c.fillRect(0,whitespace + 52,canvas.width,45); 
     whitespace = whitespace + 100; 
     ycoordinate = ycoordinate + 50; 

    } 
} 

Любые идеи о том, как перекроить последнюю строку еще раз?

Имейте в виду, что, когда будет реализована остальная часть этого веб-приложения, переменная x должна быть изменена с помощью опции clicked, поэтому количество столов должно быть как можно меньше или при необходимости.

Answer 1

Вы должны изучить основы lineWidth собственности на холсте ..

См this

Решение: Для четных тактных ширины можно использовать целые числа для координат, для нечетных тактных ширины вы хотите использовать .5 получите четкие линии, которые правильно заполняют пиксели.

Смотреть это Fiddle тоже ...

К сожалению, ни одно другое решение для этого ... не смотрите this