Last line drawn in javascript isn't like the others

Question

I have an issue drawing on <canvas> wherein this segment of my code, which draws musical staves on canvas, always makes the last line drawn lighter and almost fading away, no matter what browser is used.

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;

    }
}

The solution I have, since I used a loop to draw the lines is to redraw each line once, when in fact all I really need is draw the very last line one more time.

    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;

    }
}

Any ideas on how to redraw the last line once more?

Keep in mind, when the rest of this web app is implemented my x variable will need to be changed via clicked option, therefore letting the amount of staves be as little or much as necessary.

score 2 · Accepted Answer · edited May 23 '17 at 12:16

2

You Should learn the basics of lineWidth property in canvas ..

See this

Solution : For even stroke widths you can use integers for coordinates, for odd stroke widths you want to use .5 to get crisp lines that fill the pixels correctly.

See this Fiddle too ...

Unfortunately , no other solution for this ... Refer this

edited May 23 '17 at 12:16

Community

1
1

answered Apr 30 '13 at 04:25

Prasath K

4,950
7
23
35

Thanks, Prasath K, your example Fiddle is what I finally understood. From what I can tell, this is somewhat of a bug in the community? Had to change my y-coordinate by .5 to finally get crisp lines, and add the lineWidth property with a value of 1. – May 01 '13 at 07:07

Last line drawn in javascript isn't like the others

1 Answers1