/    Sign up×
Community /Pin to ProfileBookmark

Canvas display question

Copy linkTweet thisAlerts:
Oct 06.2016

In the following script, 2 of the 3 canvas displays
appear correctly. Where is the 3rd going?
I’m not getting any errors, but the 3rd canvas does not appear. ?

[code]
<!DOCTYPE html>
<html>
<body>

<canvas id=”myCanvas0″ width=”100″ height=”170″ style=”border:1px solid #d3d3d3;”>
Your browser does not support the HTML5 canvas tag.</canvas>
<canvas id=”myCanvas1″ width=”100″ height=”170″ style=”border:1px solid #d3d3d3;”>
<canvas id=”myCanvas2″ width=”100″ height=”170″ style=”border:1px solid #d3d3d3;”>

<script>
function drawFretboard(sw,canvasID,txt) {
var c = document.getElementById(canvasID);
var ctx = c.getContext(“2d”);
for (var s=0; s<4; s++) {
ctx.moveTo(sw+(s*sw),10+sw); ctx.lineTo(sw+(s*sw),130+sw);
}
for (var l=0; l<7; l++) {
ctx.moveTo(sw,(l*sw)+10+sw); ctx.lineTo(sw+60,(l*sw)+10+sw);
}
ctx.font = ’15px san-serif’;
ctx.textBaseline = “top”;
ctx.fillText(txt, sw, sw-10);
ctx.stroke();
}
drawFretboard(20,’myCanvas0′,’G C E A’);
drawFretboard(20,’myCanvas1′,’XXX’);
drawFretboard(20,’myCanvas2′,’YYY’);

</script>

</body>
</html>
[/code]

to post a comment
JavaScript

9 Comments(s) ↴

Copy linkTweet thisAlerts:
@shakazorbaOct 06.2016 — you didnt close the canvas tags

<canvas id="myCanvas1" width="100" height="170" style="border:1px solid #d3d3d3;"> [COLOR="#B22222"]</canvas>

[/COLOR]

<canvas id="myCanvas2" width="100" height="170" style="border:1px solid #d3d3d3;"> [COLOR="#B22222"]</canvas>[/COLOR]
Copy linkTweet thisAlerts:
@DomnickOct 06.2016 — you didnt close the canvas tags

<canvas id="myCanvas1" width="100" height="170" style="border:1px solid #d3d3d3;"> [COLOR="#B22222"]</canvas>

[/COLOR]

<canvas id="myCanvas2" width="100" height="170" style="border:1px solid #d3d3d3;"> [COLOR="#B22222"]</canvas>[/COLOR][/QUOTE]

Thank you for putting code in this forum. I am going to place this canvas on my website.
Copy linkTweet thisAlerts:
@wbportOct 06.2016 — I would be very interested in the final version of this as you were quite helpful (and credited in the Populate function) in my guitar.htm page. Is that for a ukulele?
Copy linkTweet thisAlerts:
@JMRKERauthorOct 06.2016 — you didnt close the canvas tags

<canvas id="myCanvas1" width="100" height="170" style="border:1px solid #d3d3d3;"> [COLOR="#B22222"]</canvas>

[/COLOR]

<canvas id="myCanvas2" width="100" height="170" style="border:1px solid #d3d3d3;"> [COLOR="#B22222"]</canvas>[/COLOR][/QUOTE]

Good eyes! I saw two displays and got caught up thinking that only the 3rd display was the problem. Appreciate the look.
Copy linkTweet thisAlerts:
@JMRKERauthorOct 06.2016 — I would be very interested in the final version of this as you were quite helpful (and credited in the Populate function) in my guitar.htm page. Is that for a ukulele?[/QUOTE]

Yes, guilty. :o

Just retired and my wife wanted to start a joint hobby.

Gives me a chance to combine my programming hobby as I learn chord positions.
Copy linkTweet thisAlerts:
@wbportOct 06.2016 — Gives me a chance to combine my programming hobby as I learn chord positions.[/QUOTE]
The group of programmers who use their skills to help with music isn't that big. Welcome to the club!

Good luck with your music. ?
Copy linkTweet thisAlerts:
@JMRKERauthorOct 07.2016 — For anyone who wants to view my progress.

Have fun. ?
<i>
</i>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;title&gt; Ukelele Songs &lt;/title&gt;
&lt;style type="text/css"&gt;
span { font-size: 1.25em; }
&lt;/style&gt;
&lt;body&gt;
&lt;span&gt; Ukelele Songs &lt;/span&gt;
&lt;input type="button" onclick="Reuben()" value="Reuben"&gt;
&lt;input type="button" onclick="JingleBells()" value="Jingle Bells"&gt;
&lt;input type="button" onclick="OldGrayMare()" value="The Old Gray Mare"&gt;
&lt;p&gt;
&lt;canvas id="myCanvas0" width="100" height="170" style="border:1px solid #d3d3d3;"&gt;
Your browser does not support the HTML5 canvas tag.&lt;/canvas&gt;
&lt;canvas id="myCanvas1" width="100" height="170" style="border:1px solid #d3d3d3;"&gt;&lt;/canvas&gt;
&lt;canvas id="myCanvas2" width="100" height="170" style="border:1px solid #d3d3d3;"&gt;&lt;/canvas&gt;
&lt;canvas id="myCanvas3" width="100" height="170" style="border:1px solid #d3d3d3;"&gt;&lt;/canvas&gt;
&lt;p&gt;&lt;textarea id="TArea" rows="18" cols="80"&gt;&lt;/textarea&gt;

&lt;script&gt;

function UkeChords(obj) {
this.chord = {
'Tune':'',
'A':'42 31', 'Am':'42', 'A7':'31',
'Bb':'11 21 32 43',
'C':'13', 'C7':'11',
'D':'42 32 22',
'Em':'43 33 22 11', 'E7':'12 32 41',
'F':'21 42',
'G':'12 23 32', 'G7':'21 32 12'
}
this.drawFretboard = function(sw,canvasID,txt,cord) {
var c = document.getElementById(canvasID),
i, s, f, a,
ctx = c.getContext("2d");
ctx.font = '15px san-serif';
ctx.textBaseline = "top";
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

<i> </i>for (i=0; i&lt;4; i++) {
<i> </i> ctx.moveTo(sw+(i*sw),10+sw); ctx.lineTo(sw+(i*sw),130+sw);
<i> </i>}
<i> </i>for (var i=0; i&lt;7; i++) {
<i> </i> ctx.moveTo(sw,(i*sw)+10+sw); ctx.lineTo(sw+60,(i*sw)+10+sw);
<i> </i>}
<i> </i>ctx.stroke();
<i> </i>ctx.fillText(txt, sw, sw-10);
<i> </i>var arr = cord.split(' ');
<i> </i>for (var i=0; i&lt;arr.length; i++) {
<i> </i> if (arr[i] != '') {
<i> </i> a = arr[i].split('');
<i> </i> s = a[0]; f = a[1];
<i> </i> ctx.fillText('O',95-s*sw,f*sw+12);
<i> </i> }
<i> </i>}
}
this.clearFretboard = function(canvasID) {
var c = document.getElementById(canvasID),
ctx = c.getContext("2d");
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}
}

var h = new UkeChords({});

function Reuben() {
var SongReuben = [
"[F] Reuben, Reuben, I've been thinking",
"[F] What a grand world this would be",
"[F] If the women [C7] were trans [F] -ported",
"[F] Far beyond the [G7] North- [C7] ern [F] sea."
];
h.drawFretboard(20,'myCanvas0','G C E A', h.chord['Tune']);
h.drawFretboard(20,'myCanvas1','F', h.chord['F']); // F
h.drawFretboard(20,'myCanvas2','C7',h.chord['C7']); // C7
h.drawFretboard(20,'myCanvas3','G7',h.chord['G7']); // G7
document.getElementById('TArea').value = SongReuben.join('nn');
}

function JingleBells() {
var SongJingleBells = [
"[F] Jingle bells, jingle bells",
"[F] Jingle all the day",
"[C7] Oh what fun it [F] is to ride",
"[F] In a [G7] one horse open [F] sleigh",
"[F] Jingle bells, jingle bells",
"[F] Jingle all the way",
"[C7] Oh what fun it [F] is to ride",
"[F] In a [C7] one horse open [F] sleigh"
];
h.clearFretboard('myCanvas0');
h.drawFretboard(20,'myCanvas1','F', h.chord['F']); // F
h.drawFretboard(20,'myCanvas2','G7',h.chord['G7']); // G7
h.drawFretboard(20,'myCanvas3','C7',h.chord['C7']); // C7
document.getElementById('TArea').value = SongJingleBells.join('nn');
}

function OldGrayMare() {
var SongOldGrayMare = [
"[F] The old gray mare she ain't what she used to be,",
"[C7] Ain't what she used to be, [F] Ain't what she used to be",
"[F] The old gray mare she ain't what she used to be,",
"[C7] Twenty-five [Bb] years a- [F] go.",
"[C7] Twenty-five [Bb] years a- [F] go. --- Oh,",
"[F] The old gray mare she ain't what she used to be,",
"[C7] Ain't what she used to be, [F] Ain't what she used to be",
"[F] The old gray mare she ain't what she used to be,",
"[G7] Twenty-five [Bb] years a- [F] go."
];
h.drawFretboard(20,'myCanvas0','F', h.chord['F']); // F
h.drawFretboard(20,'myCanvas1','C7',h.chord['C7']); // C7
h.drawFretboard(20,'myCanvas2','G7',h.chord['G7']); // G7
h.drawFretboard(20,'myCanvas3','Bb', h.chord['Bb']); // Bb
document.getElementById('TArea').value = SongOldGrayMare.join('nn');
}
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@Benur21Oct 13.2016 — Why do you need 3 canvas? I think you can do the same with 1 bigger canvas.
Copy linkTweet thisAlerts:
@JMRKERauthorOct 14.2016 — Why do you need 3 canvas? I think you can do the same with 1 bigger canvas.[/QUOTE]

True, but the example also shows:

1. How you would address multiple canvas elements with one anonymous function. Note also that relative positioning is used rather than absolute for the additional displays.

  • 2. How to setup an object "UkeChords" to define the placement of the finger positions on a graphic fretboard.


  • 3. Modifications to the code I have made for other displays, like horizontal fret boards rather than vertical, are a lot easier when the function does not introduce additional calculations for absolute positions inside a larger canvas.


    • Plus the logic for the "drawFretboard" function becomes a lot easier than calculating not only the fret positions but also the different positions of the frets on one single canvas. I like to use the KISS principle (Keep It Simple, Stupid or it's variant - "keep it simple and straightforward" ) whenever possible. In my particular example above I used 4 canvas elements, but I use even more in some other scripts. I believe using a single function 4+ times reduces the code that would be required for the extra placement logic required for multiple frets on a single canvas.

    You are most welcome to submit your particular solution using a single canvas for code comparison purposes. I think that is what I like most about forums because I can see other approaches to coding problems.

    Good Luck!

    ?
    ×

    Success!

    Help @JMRKER spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 4.29,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,

    tipper: @Samric24,
    tipped: article
    amount: 1000 SATS,
    )...