vexflow
Version:
A JavaScript library for rendering music notation and guitar tablature
907 lines (667 loc) • 33.7 kB
HTML
<html>
<head>
<title>staveconnector.js</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" media="all" href="public/stylesheets/normalize.css" />
<link rel="stylesheet" media="all" href="docco.css" />
</head>
<body>
<div class="container">
<div class="page">
<div class="header">
<h1>staveconnector.js</h1>
<div class="toc">
<h3>Table of Contents</h3>
<ol>
<li>
<a class="source" href="accidental.html">
accidental.js
</a>
</li>
<li>
<a class="source" href="annotation.html">
annotation.js
</a>
</li>
<li>
<a class="source" href="articulation.html">
articulation.js
</a>
</li>
<li>
<a class="source" href="barnote.html">
barnote.js
</a>
</li>
<li>
<a class="source" href="beam.html">
beam.js
</a>
</li>
<li>
<a class="source" href="bend.html">
bend.js
</a>
</li>
<li>
<a class="source" href="boundingbox.html">
boundingbox.js
</a>
</li>
<li>
<a class="source" href="boundingboxcomputation.html">
boundingboxcomputation.js
</a>
</li>
<li>
<a class="source" href="canvascontext.html">
canvascontext.js
</a>
</li>
<li>
<a class="source" href="clef.html">
clef.js
</a>
</li>
<li>
<a class="source" href="clefnote.html">
clefnote.js
</a>
</li>
<li>
<a class="source" href="crescendo.html">
crescendo.js
</a>
</li>
<li>
<a class="source" href="curve.html">
curve.js
</a>
</li>
<li>
<a class="source" href="dot.html">
dot.js
</a>
</li>
<li>
<a class="source" href="easyscore.html">
easyscore.js
</a>
</li>
<li>
<a class="source" href="element.html">
element.js
</a>
</li>
<li>
<a class="source" href="factory.html">
factory.js
</a>
</li>
<li>
<a class="source" href="formatter.html">
formatter.js
</a>
</li>
<li>
<a class="source" href="fraction.html">
fraction.js
</a>
</li>
<li>
<a class="source" href="frethandfinger.html">
frethandfinger.js
</a>
</li>
<li>
<a class="source" href="ghostnote.html">
ghostnote.js
</a>
</li>
<li>
<a class="source" href="glyph.html">
glyph.js
</a>
</li>
<li>
<a class="source" href="glyphnote.html">
glyphnote.js
</a>
</li>
<li>
<a class="source" href="gracenote.html">
gracenote.js
</a>
</li>
<li>
<a class="source" href="gracenotegroup.html">
gracenotegroup.js
</a>
</li>
<li>
<a class="source" href="gracetabnote.html">
gracetabnote.js
</a>
</li>
<li>
<a class="source" href="index.html">
index.js
</a>
</li>
<li>
<a class="source" href="keymanager.html">
keymanager.js
</a>
</li>
<li>
<a class="source" href="keysignature.html">
keysignature.js
</a>
</li>
<li>
<a class="source" href="keysignote.html">
keysignote.js
</a>
</li>
<li>
<a class="source" href="modifier.html">
modifier.js
</a>
</li>
<li>
<a class="source" href="modifiercontext.html">
modifiercontext.js
</a>
</li>
<li>
<a class="source" href="multimeasurerest.html">
multimeasurerest.js
</a>
</li>
<li>
<a class="source" href="music.html">
music.js
</a>
</li>
<li>
<a class="source" href="note.html">
note.js
</a>
</li>
<li>
<a class="source" href="notehead.html">
notehead.js
</a>
</li>
<li>
<a class="source" href="notesubgroup.html">
notesubgroup.js
</a>
</li>
<li>
<a class="source" href="ornament.html">
ornament.js
</a>
</li>
<li>
<a class="source" href="parser.html">
parser.js
</a>
</li>
<li>
<a class="source" href="pedalmarking.html">
pedalmarking.js
</a>
</li>
<li>
<a class="source" href="raphaelcontext.html">
raphaelcontext.js
</a>
</li>
<li>
<a class="source" href="registry.html">
registry.js
</a>
</li>
<li>
<a class="source" href="renderer.html">
renderer.js
</a>
</li>
<li>
<a class="source" href="repeatnote.html">
repeatnote.js
</a>
</li>
<li>
<a class="source" href="smufl.html">
smufl.js
</a>
</li>
<li>
<a class="source" href="stave.html">
stave.js
</a>
</li>
<li>
<a class="source" href="stavebarline.html">
stavebarline.js
</a>
</li>
<li>
<a class="source" href="staveconnector.html">
staveconnector.js
</a>
</li>
<li>
<a class="source" href="stavehairpin.html">
stavehairpin.js
</a>
</li>
<li>
<a class="source" href="staveline.html">
staveline.js
</a>
</li>
<li>
<a class="source" href="stavemodifier.html">
stavemodifier.js
</a>
</li>
<li>
<a class="source" href="stavenote.html">
stavenote.js
</a>
</li>
<li>
<a class="source" href="staverepetition.html">
staverepetition.js
</a>
</li>
<li>
<a class="source" href="stavesection.html">
stavesection.js
</a>
</li>
<li>
<a class="source" href="stavetempo.html">
stavetempo.js
</a>
</li>
<li>
<a class="source" href="stavetext.html">
stavetext.js
</a>
</li>
<li>
<a class="source" href="stavetie.html">
stavetie.js
</a>
</li>
<li>
<a class="source" href="stavevolta.html">
stavevolta.js
</a>
</li>
<li>
<a class="source" href="stem.html">
stem.js
</a>
</li>
<li>
<a class="source" href="stemmablenote.html">
stemmablenote.js
</a>
</li>
<li>
<a class="source" href="stringnumber.html">
stringnumber.js
</a>
</li>
<li>
<a class="source" href="strokes.html">
strokes.js
</a>
</li>
<li>
<a class="source" href="svgcontext.html">
svgcontext.js
</a>
</li>
<li>
<a class="source" href="system.html">
system.js
</a>
</li>
<li>
<a class="source" href="tables.html">
tables.js
</a>
</li>
<li>
<a class="source" href="tabnote.html">
tabnote.js
</a>
</li>
<li>
<a class="source" href="tabslide.html">
tabslide.js
</a>
</li>
<li>
<a class="source" href="tabstave.html">
tabstave.js
</a>
</li>
<li>
<a class="source" href="tabtie.html">
tabtie.js
</a>
</li>
<li>
<a class="source" href="textbracket.html">
textbracket.js
</a>
</li>
<li>
<a class="source" href="textdynamics.html">
textdynamics.js
</a>
</li>
<li>
<a class="source" href="textnote.html">
textnote.js
</a>
</li>
<li>
<a class="source" href="tickable.html">
tickable.js
</a>
</li>
<li>
<a class="source" href="tickcontext.html">
tickcontext.js
</a>
</li>
<li>
<a class="source" href="timesignature.html">
timesignature.js
</a>
</li>
<li>
<a class="source" href="timesignote.html">
timesignote.js
</a>
</li>
<li>
<a class="source" href="tremolo.html">
tremolo.js
</a>
</li>
<li>
<a class="source" href="tuning.html">
tuning.js
</a>
</li>
<li>
<a class="source" href="tuplet.html">
tuplet.js
</a>
</li>
<li>
<a class="source" href="vex.html">
vex.js
</a>
</li>
<li>
<a class="source" href="vibrato.html">
vibrato.js
</a>
</li>
<li>
<a class="source" href="vibratobracket.html">
vibratobracket.js
</a>
</li>
<li>
<a class="source" href="voice.html">
voice.js
</a>
</li>
<li>
<a class="source" href="voicegroup.html">
voicegroup.js
</a>
</li>
</ol>
</div>
</div>
<p><a href="http://vexflow.com">VexFlow</a> - Copyright (c) Mohit Muthanna 2010.</p>
<div class='highlight'><pre>
<span class="hljs-keyword">import</span> { Vex } <span class="hljs-keyword">from</span> <span class="hljs-string">'./vex'</span>;
<span class="hljs-keyword">import</span> { Element } <span class="hljs-keyword">from</span> <span class="hljs-string">'./element'</span>;
<span class="hljs-keyword">import</span> { Flow } <span class="hljs-keyword">from</span> <span class="hljs-string">'./tables'</span>;
<span class="hljs-keyword">import</span> { Glyph } <span class="hljs-keyword">from</span> <span class="hljs-string">'./glyph'</span>;
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">drawBoldDoubleLine</span>(<span class="hljs-params">ctx, type, topX, topY, botY</span>) </span>{
<span class="hljs-keyword">if</span> (
type !== StaveConnector.type.BOLD_DOUBLE_LEFT &&
type !== StaveConnector.type.BOLD_DOUBLE_RIGHT
) {
<span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> Vex.RERR(
<span class="hljs-string">'InvalidConnector'</span>, <span class="hljs-string">'A REPEAT_BEGIN or REPEAT_END type must be provided.'</span>
);
}
<span class="hljs-keyword">let</span> x_shift = <span class="hljs-number">3</span>;
<span class="hljs-keyword">let</span> variableWidth = <span class="hljs-number">3.5</span>; <span class="hljs-comment">// Width for avoiding anti-aliasing width issues</span>
<span class="hljs-keyword">const</span> thickLineOffset = <span class="hljs-number">2</span>; <span class="hljs-comment">// For aesthetics</span>
<span class="hljs-keyword">if</span> (type === StaveConnector.type.BOLD_DOUBLE_RIGHT) {
x_shift = <span class="hljs-number">-5</span>; <span class="hljs-comment">// Flips the side of the thin line</span>
variableWidth = <span class="hljs-number">3</span>;
}</pre></div>
<p>Thin line</p>
<div class='highlight'><pre> ctx.fillRect(topX + x_shift, topY, <span class="hljs-number">1</span>, botY - topY);</pre></div>
<p>Thick line</p>
<div class='highlight'><pre> ctx.fillRect(topX - thickLineOffset, topY, variableWidth, botY - topY);
}
<span class="hljs-keyword">export</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">StaveConnector</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Element</span> </span>{</pre></div>
<p>SINGLE_LEFT and SINGLE are the same value for compatibility
with older versions of vexflow which didn’t have right sided
stave connectors</p>
<div class='highlight'><pre> <span class="hljs-keyword">static</span> get type() {
<span class="hljs-keyword">return</span> {
<span class="hljs-attr">SINGLE_RIGHT</span>: <span class="hljs-number">0</span>,
<span class="hljs-attr">SINGLE_LEFT</span>: <span class="hljs-number">1</span>,
<span class="hljs-attr">SINGLE</span>: <span class="hljs-number">1</span>,
<span class="hljs-attr">DOUBLE</span>: <span class="hljs-number">2</span>,
<span class="hljs-attr">BRACE</span>: <span class="hljs-number">3</span>,
<span class="hljs-attr">BRACKET</span>: <span class="hljs-number">4</span>,
<span class="hljs-attr">BOLD_DOUBLE_LEFT</span>: <span class="hljs-number">5</span>,
<span class="hljs-attr">BOLD_DOUBLE_RIGHT</span>: <span class="hljs-number">6</span>,
<span class="hljs-attr">THIN_DOUBLE</span>: <span class="hljs-number">7</span>,
<span class="hljs-attr">NONE</span>: <span class="hljs-number">8</span>,
};
}
<span class="hljs-keyword">static</span> get typeString() {
<span class="hljs-keyword">return</span> {
<span class="hljs-attr">singleRight</span>: StaveConnector.type.SINGLE_RIGHT,
<span class="hljs-attr">singleLeft</span>: StaveConnector.type.SINGLE_LEFT,
<span class="hljs-attr">single</span>: StaveConnector.type.SINGLE,
<span class="hljs-attr">double</span>: StaveConnector.type.DOUBLE,
<span class="hljs-attr">brace</span>: StaveConnector.type.BRACE,
<span class="hljs-attr">bracket</span>: StaveConnector.type.BRACKET,
<span class="hljs-attr">boldDoubleLeft</span>: StaveConnector.type.BOLD_DOUBLE_LEFT,
<span class="hljs-attr">boldDoubleRight</span>: StaveConnector.type.BOLD_DOUBLE_RIGHT,
<span class="hljs-attr">thinDouble</span>: StaveConnector.type.THIN_DOUBLE,
<span class="hljs-attr">none</span>: StaveConnector.type.NONE,
};
}
<span class="hljs-keyword">constructor</span>(top_stave, bottom_stave) {
<span class="hljs-keyword">super</span>();
<span class="hljs-keyword">this</span>.setAttribute(<span class="hljs-string">'type'</span>, <span class="hljs-string">'StaveConnector'</span>);
<span class="hljs-keyword">this</span>.thickness = Flow.STAVE_LINE_THICKNESS;
<span class="hljs-keyword">this</span>.width = <span class="hljs-number">3</span>;
<span class="hljs-keyword">this</span>.top_stave = top_stave;
<span class="hljs-keyword">this</span>.bottom_stave = bottom_stave;
<span class="hljs-keyword">this</span>.type = StaveConnector.type.DOUBLE;
<span class="hljs-keyword">this</span>.font = {
<span class="hljs-attr">family</span>: <span class="hljs-string">'times'</span>,
<span class="hljs-attr">size</span>: <span class="hljs-number">16</span>,
<span class="hljs-attr">weight</span>: <span class="hljs-string">'normal'</span>,
};</pre></div>
<ol>
<li>Offset Bold Double Left to align with offset Repeat Begin bars</li>
<li>Offset BRACE type not to overlap with another StaveConnector</li>
</ol>
<div class='highlight'><pre> <span class="hljs-keyword">this</span>.x_shift = <span class="hljs-number">0</span>;
<span class="hljs-keyword">this</span>.texts = [];
}
setType(type) {
type = <span class="hljs-keyword">typeof</span>(type) === <span class="hljs-string">'string'</span>
? StaveConnector.typeString[type]
: type;
<span class="hljs-keyword">if</span> (type >= StaveConnector.type.SINGLE_RIGHT && type <= StaveConnector.type.NONE) {
<span class="hljs-keyword">this</span>.type = type;
}
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>;
}
setText(text, options) {
<span class="hljs-keyword">this</span>.texts.push({
<span class="hljs-attr">content</span>: text,
<span class="hljs-attr">options</span>: Vex.Merge({ <span class="hljs-attr">shift_x</span>: <span class="hljs-number">0</span>, <span class="hljs-attr">shift_y</span>: <span class="hljs-number">0</span> }, options),
});
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>;
}
setFont(font) {
Vex.Merge(<span class="hljs-keyword">this</span>.font, font);
}
setXShift(x_shift) {
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> x_shift !== <span class="hljs-string">'number'</span>) {
<span class="hljs-keyword">throw</span> Vex.RERR(<span class="hljs-string">'InvalidType'</span>, <span class="hljs-string">'x_shift must be a Number'</span>);
}
<span class="hljs-keyword">this</span>.x_shift = x_shift;
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>;
}
draw() {
<span class="hljs-keyword">const</span> ctx = <span class="hljs-keyword">this</span>.checkContext();
<span class="hljs-keyword">this</span>.setRendered();
<span class="hljs-keyword">let</span> topY = <span class="hljs-keyword">this</span>.top_stave.getYForLine(<span class="hljs-number">0</span>);
<span class="hljs-keyword">let</span> botY = <span class="hljs-keyword">this</span>.bottom_stave.getYForLine(<span class="hljs-keyword">this</span>.bottom_stave.getNumLines() - <span class="hljs-number">1</span>) +
<span class="hljs-keyword">this</span>.thickness;
<span class="hljs-keyword">let</span> width = <span class="hljs-keyword">this</span>.width;
<span class="hljs-keyword">let</span> topX = <span class="hljs-keyword">this</span>.top_stave.getX();
<span class="hljs-keyword">const</span> isRightSidedConnector = (
<span class="hljs-keyword">this</span>.type === StaveConnector.type.SINGLE_RIGHT ||
<span class="hljs-keyword">this</span>.type === StaveConnector.type.BOLD_DOUBLE_RIGHT ||
<span class="hljs-keyword">this</span>.type === StaveConnector.type.THIN_DOUBLE
);
<span class="hljs-keyword">if</span> (isRightSidedConnector) {
topX = <span class="hljs-keyword">this</span>.top_stave.getX() + <span class="hljs-keyword">this</span>.top_stave.width;
}
<span class="hljs-keyword">let</span> attachment_height = botY - topY;
<span class="hljs-keyword">switch</span> (<span class="hljs-keyword">this</span>.type) {
<span class="hljs-keyword">case</span> StaveConnector.type.SINGLE:
width = <span class="hljs-number">1</span>;
<span class="hljs-keyword">break</span>;
<span class="hljs-keyword">case</span> StaveConnector.type.SINGLE_LEFT:
width = <span class="hljs-number">1</span>;
<span class="hljs-keyword">break</span>;
<span class="hljs-keyword">case</span> StaveConnector.type.SINGLE_RIGHT:
width = <span class="hljs-number">1</span>;
<span class="hljs-keyword">break</span>;
<span class="hljs-keyword">case</span> StaveConnector.type.DOUBLE:
topX -= (<span class="hljs-keyword">this</span>.width + <span class="hljs-number">2</span>);
topY -= <span class="hljs-keyword">this</span>.thickness;
attachment_height += <span class="hljs-number">0.5</span>;
<span class="hljs-keyword">break</span>;
<span class="hljs-keyword">case</span> StaveConnector.type.BRACE: {
width = <span class="hljs-number">12</span>;</pre></div>
<p>May need additional code to draw brace</p>
<div class='highlight'><pre> <span class="hljs-keyword">const</span> x1 = <span class="hljs-keyword">this</span>.top_stave.getX() - <span class="hljs-number">2</span> + <span class="hljs-keyword">this</span>.x_shift;
<span class="hljs-keyword">const</span> y1 = topY;
<span class="hljs-keyword">const</span> x3 = x1;
<span class="hljs-keyword">const</span> y3 = botY;
<span class="hljs-keyword">const</span> x2 = x1 - width;
<span class="hljs-keyword">const</span> y2 = y1 + attachment_height / <span class="hljs-number">2.0</span>;
<span class="hljs-keyword">const</span> cpx1 = x2 - (<span class="hljs-number">0.90</span> * width);
<span class="hljs-keyword">const</span> cpy1 = y1 + (<span class="hljs-number">0.2</span> * attachment_height);
<span class="hljs-keyword">const</span> cpx2 = x1 + (<span class="hljs-number">1.10</span> * width);
<span class="hljs-keyword">const</span> cpy2 = y2 - (<span class="hljs-number">0.135</span> * attachment_height);
<span class="hljs-keyword">const</span> cpx3 = cpx2;
<span class="hljs-keyword">const</span> cpy3 = y2 + (<span class="hljs-number">0.135</span> * attachment_height);
<span class="hljs-keyword">const</span> cpx4 = cpx1;
<span class="hljs-keyword">const</span> cpy4 = y3 - (<span class="hljs-number">0.2</span> * attachment_height);
<span class="hljs-keyword">const</span> cpx5 = x2 - width;
<span class="hljs-keyword">const</span> cpy5 = cpy4;
<span class="hljs-keyword">const</span> cpx6 = x1 + (<span class="hljs-number">0.40</span> * width);
<span class="hljs-keyword">const</span> cpy6 = y2 + (<span class="hljs-number">0.135</span> * attachment_height);
<span class="hljs-keyword">const</span> cpx7 = cpx6;
<span class="hljs-keyword">const</span> cpy7 = y2 - (<span class="hljs-number">0.135</span> * attachment_height);
<span class="hljs-keyword">const</span> cpx8 = cpx5;
<span class="hljs-keyword">const</span> cpy8 = cpy1;
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.bezierCurveTo(cpx1, cpy1, cpx2, cpy2, x2, y2);
ctx.bezierCurveTo(cpx3, cpy3, cpx4, cpy4, x3, y3);
ctx.bezierCurveTo(cpx5, cpy5, cpx6, cpy6, x2, y2);
ctx.bezierCurveTo(cpx7, cpy7, cpx8, cpy8, x1, y1);
ctx.fill();
ctx.stroke();
<span class="hljs-keyword">break</span>;
} <span class="hljs-keyword">case</span> StaveConnector.type.BRACKET:
topY -= <span class="hljs-number">6</span>;
botY += <span class="hljs-number">6</span>;
attachment_height = botY - topY;
Glyph.renderGlyph(ctx, topX - <span class="hljs-number">5</span>, topY, <span class="hljs-number">40</span>, <span class="hljs-string">'bracketTop'</span>);
Glyph.renderGlyph(ctx, topX - <span class="hljs-number">5</span>, botY, <span class="hljs-number">40</span>, <span class="hljs-string">'bracketBottom'</span>);
topX -= (<span class="hljs-keyword">this</span>.width + <span class="hljs-number">2</span>);
<span class="hljs-keyword">break</span>;
<span class="hljs-keyword">case</span> StaveConnector.type.BOLD_DOUBLE_LEFT:
drawBoldDoubleLine(ctx, <span class="hljs-keyword">this</span>.type, topX + <span class="hljs-keyword">this</span>.x_shift, topY, botY - <span class="hljs-keyword">this</span>.thickness);
<span class="hljs-keyword">break</span>;
<span class="hljs-keyword">case</span> StaveConnector.type.BOLD_DOUBLE_RIGHT:
drawBoldDoubleLine(ctx, <span class="hljs-keyword">this</span>.type, topX, topY, botY - <span class="hljs-keyword">this</span>.thickness);
<span class="hljs-keyword">break</span>;
<span class="hljs-keyword">case</span> StaveConnector.type.THIN_DOUBLE:
width = <span class="hljs-number">1</span>;
attachment_height -= <span class="hljs-keyword">this</span>.thickness;
<span class="hljs-keyword">break</span>;
<span class="hljs-keyword">case</span> StaveConnector.type.NONE:
<span class="hljs-keyword">break</span>;
<span class="hljs-keyword">default</span>:
<span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> Vex.RERR(
<span class="hljs-string">'InvalidType'</span>, <span class="hljs-string">`The provided StaveConnector.type (<span class="hljs-subst">${<span class="hljs-keyword">this</span>.type}</span>) is invalid`</span>
);
}
<span class="hljs-keyword">if</span> (
<span class="hljs-keyword">this</span>.type !== StaveConnector.type.BRACE &&
<span class="hljs-keyword">this</span>.type !== StaveConnector.type.BOLD_DOUBLE_LEFT &&
<span class="hljs-keyword">this</span>.type !== StaveConnector.type.BOLD_DOUBLE_RIGHT &&
<span class="hljs-keyword">this</span>.type !== StaveConnector.type.NONE
) {
ctx.fillRect(topX, topY, width, attachment_height);
}</pre></div>
<p>If the connector is a thin double barline, draw the paralell line</p>
<div class='highlight'><pre> <span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.type === StaveConnector.type.THIN_DOUBLE) {
ctx.fillRect(topX - <span class="hljs-number">3</span>, topY, width, attachment_height);
}
ctx.save();
ctx.lineWidth = <span class="hljs-number">2</span>;
ctx.setFont(<span class="hljs-keyword">this</span>.font.family, <span class="hljs-keyword">this</span>.font.size, <span class="hljs-keyword">this</span>.font.weight);</pre></div>
<p>Add stave connector text</p>
<div class='highlight'><pre> <span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> i = <span class="hljs-number">0</span>; i < <span class="hljs-keyword">this</span>.texts.length; i++) {
<span class="hljs-keyword">const</span> text = <span class="hljs-keyword">this</span>.texts[i];
<span class="hljs-keyword">const</span> text_width = ctx.measureText(<span class="hljs-string">''</span> + text.content).width;
<span class="hljs-keyword">const</span> x = <span class="hljs-keyword">this</span>.top_stave.getX() - text_width - <span class="hljs-number">24</span> + text.options.shift_x;
<span class="hljs-keyword">const</span> y = (<span class="hljs-keyword">this</span>.top_stave.getYForLine(<span class="hljs-number">0</span>) + <span class="hljs-keyword">this</span>.bottom_stave.getBottomLineY()) / <span class="hljs-number">2</span> +
text.options.shift_y;
ctx.fillText(<span class="hljs-string">''</span> + text.content, x, y + <span class="hljs-number">4</span>);
}
ctx.restore();
}
}</pre></div>
<div class="fleur">h</div>
</div>
</div>
</body>
</html>