Take the 2-minute tour ×
Programmers Stack Exchange is a question and answer site for professional programmers interested in conceptual questions about software development. It's 100% free, no registration required.

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.

share|improve this question
1  
I made a function fiddle 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
3  
@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). –  Shawn Strickland Apr 28 '13 at 1:36

2 Answers 2

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?

share|improve this answer
up vote 1 down vote accepted

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/

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.