Repetitive Drawing in Javascript & Canvas

Question

Creating an HTML5 page using canvas and javascript to draw a set number of musical staves on the page, spaced a pre-determined amount in between.

What I have is re-drawn on top of the canvas 10 times, and what I really need is something that's spaced out apart every time the loop is drawn.

I tried to create a JSFiddle, but it doesn't draw anything (which I'm sure is user-error), so here's the js file:

window.onload = function(){

var canvas = document.getElementById('sheetmusic');
    c = canvas.getContext('2d');

c.fillStyle = 'white';
c.fillRect(0,0, canvas.width, canvas.height);

//  Draw staves
for (var i=0; i<10; i++){
    c.strokeStyle = 'black';
    c.beginPath();
    c.moveTo(0,10);
    c.lineTo(canvas.width,10);
    c.stroke();
    c.moveTo(0,20);
    c.lineTo(canvas.width,20);
    c.stroke();
    c.moveTo(0,30);
    c.lineTo(canvas.width,30);
    c.stroke();
    c.moveTo(0,40);
    c.lineTo(canvas.width,40);
    c.stroke();
    c.moveTo(0,50);
    c.lineTo(canvas.width,50);
    c.stroke();
    // staff whitespace
    c.fillStyle = 'white';
    c.fillRect(0,52, canvas.width, 50);
    }
};

I'm just not certain how to append i from my loop into the height attribute of my stroke.

I made a [function fiddle](http://jsfiddle.net/6cTTS/) for you. Your code didn't work because jsFiddle runs code on `load` by default (settable in the top left corner). You were binding an `onload` listener *after* the one and only `load` event had already fired. — apsillers, Apr 25 '13 at 14:16
@apsillers what is the point of using a loop ? your not using the loop var. just doing the same drawing 10 times! — tgkprog, Apr 25 '13 at 22:39
@tgkprog I just copied the OP's code verbatim without reading it; my intent was to diagnose his jsFiddle problems ("`I tried to create a JSFiddle, but it doesn't draw anything...`"), not his actual code. — apsillers, Apr 25 '13 at 23:26
thank you, apsillers for leading me to the JSFiddle fix for onload vs onDomready (which is what I needed for it to work). — , Apr 28 '13 at 01:36

tgkprog · Answer 1 · 2013-06-06T18:14:28.753

You need to change the x, might help to visualize on a piece of paper or paint with grids what your doing.

This will make lines from top to the bottom

<!DOCTYPE HTML>
        <html>
        <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <span id=dbg
    ></span>
    <br>
        <canvas id=sheetmusic  width="800" height="625"></canvas>
    <br>
    <div id=dbgD></div>

        <script language="Javascript">

    dbr =  document.getElementById('dbgD');
    function dbg(s){
    dbr.innerHTML = dbr.innerHTML + "<br>" + s
    }
    window.onload = function(){

    var canvas = document.getElementById('sheetmusic');

    c = canvas.getContext('2d');
    dbg(" canvas " + canvas + "; 2d " + c);
    //c.fillStyle = 'white';
    //c.fillRect(0,0, canvas.width, canvas.height);
    canvas.width = canvas.width //clears

    c.fillStyle = 'green';

    heightDiff = 15;
    numberLines = canvas.height / heightDiff
    //  Draw staves
    for (var i=0; i< numberLines; i++){
        c.strokeStyle = 'black';
        c.beginPath();
        c.moveTo(0,10 + (i * heightDiff));
        c.lineTo(canvas.width, 10 + (i * heightDiff));
        c.stroke();

        /*

        c.moveTo(0,20);
        c.lineTo(canvas.width,20);
        c.stroke();
        c.moveTo(0,30);
        c.lineTo(canvas.width,30);
        c.stroke();
        c.moveTo(0,40);
        c.lineTo(canvas.width,40);
        c.stroke();
        c.moveTo(0,50);
        c.lineTo(canvas.width,50);
        c.stroke();
        */

        // staff whitespace, not sure what you want to do here
        c.fillStyle = 'white';
        //c.fillRect(0,52, canvas.width, 50);
        }
    };


    </script>

Maybe a few tutorials on loops and using their vars will help ? http://www.echoecho.com/javascript9.htm not sure exactly what you want to achieve except make some lines that look like music notes?

score 1 · Accepted Answer · 2013-04-28T01:34:17.047

Figured out what I was going for. Wanted to use loops to make the code as concise as possible, but ran into a few problems until I achieved this.

window.onload = draw;

function draw() {
    var canvas = document.getElementById('sheetmusic');
    var c = canvas.getContext('2d');
    var whitespace = 0;
    var ycoordinate = 10;

    //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,52);
        whitespace = whitespace + 100;
        ycoordinate = ycoordinate + 30;

    }
}

Now I can set x to repeat as many times as I want, in order to draw music staves in javascript, with the correct amount of adjustable whitespace in between them.

Had to go back and look up some more information on loops, as suggested by tgkprog. Thanks!

Demo'able JS Fiddle at http://jsfiddle.net/ShawnCodes/K8j7u/1/

Repetitive Drawing in Javascript & Canvas

2 Answers2