vexflow
Version:
A JavaScript library for rendering music notation and guitar tablature
1,006 lines (690 loc) • 36.7 kB
HTML
<html>
<head>
<title>textnote.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>textnote.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="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="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>
<h2 id="description">Description</h2>
<p><code>TextNote</code> is a notation element that is positioned in time. Generally
meant for objects that sit above/below the staff and inline with each other.
Examples of this would be such as dynamics, lyrics, chord changes, etc.</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> { Flow } <span class="hljs-keyword">from</span> <span class="hljs-string">'./tables'</span>;
<span class="hljs-keyword">import</span> { Note } <span class="hljs-keyword">from</span> <span class="hljs-string">'./note'</span>;
<span class="hljs-keyword">import</span> { Glyph } <span class="hljs-keyword">from</span> <span class="hljs-string">'./glyph'</span>;
<span class="hljs-keyword">export</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">TextNote</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Note</span> </span>{
<span class="hljs-keyword">static</span> get Justification() {
<span class="hljs-keyword">return</span> {
<span class="hljs-attr">LEFT</span>: <span class="hljs-number">1</span>,
<span class="hljs-attr">CENTER</span>: <span class="hljs-number">2</span>,
<span class="hljs-attr">RIGHT</span>: <span class="hljs-number">3</span>,
};
}</pre></div>
<p>Glyph data</p>
<div class='highlight'><pre> <span class="hljs-keyword">static</span> get GLYPHS() {
<span class="hljs-keyword">return</span> {
<span class="hljs-string">'segno'</span>: {
<span class="hljs-attr">code</span>: <span class="hljs-string">'v8c'</span>,
<span class="hljs-attr">point</span>: <span class="hljs-number">40</span>,
<span class="hljs-attr">x_shift</span>: <span class="hljs-number">0</span>,
<span class="hljs-attr">y_shift</span>: <span class="hljs-number">-10</span>,</pre></div>
<p>width: 10 // optional</p>
<div class='highlight'><pre> },
<span class="hljs-string">'tr'</span>: {
<span class="hljs-attr">code</span>: <span class="hljs-string">'v1f'</span>,
<span class="hljs-attr">point</span>: <span class="hljs-number">40</span>,
<span class="hljs-attr">x_shift</span>: <span class="hljs-number">0</span>,
<span class="hljs-attr">y_shift</span>: <span class="hljs-number">0</span>,</pre></div>
<p>width: 10 // optional</p>
<div class='highlight'><pre> },
<span class="hljs-string">'mordent_upper'</span>: {
<span class="hljs-attr">code</span>: <span class="hljs-string">'v1e'</span>,
<span class="hljs-attr">point</span>: <span class="hljs-number">40</span>,
<span class="hljs-attr">x_shift</span>: <span class="hljs-number">0</span>,
<span class="hljs-attr">y_shift</span>: <span class="hljs-number">0</span>,</pre></div>
<p>width: 10 // optional</p>
<div class='highlight'><pre> },
<span class="hljs-string">'mordent_lower'</span>: {
<span class="hljs-attr">code</span>: <span class="hljs-string">'v45'</span>,
<span class="hljs-attr">point</span>: <span class="hljs-number">40</span>,
<span class="hljs-attr">x_shift</span>: <span class="hljs-number">0</span>,
<span class="hljs-attr">y_shift</span>: <span class="hljs-number">0</span>,</pre></div>
<p>width: 10 // optional</p>
<div class='highlight'><pre> },
<span class="hljs-string">'f'</span>: {
<span class="hljs-attr">code</span>: <span class="hljs-string">'vba'</span>,
<span class="hljs-attr">point</span>: <span class="hljs-number">40</span>,
<span class="hljs-attr">x_shift</span>: <span class="hljs-number">0</span>,
<span class="hljs-attr">y_shift</span>: <span class="hljs-number">0</span>,</pre></div>
<p>width: 10 // optional</p>
<div class='highlight'><pre> },
<span class="hljs-string">'p'</span>: {
<span class="hljs-attr">code</span>: <span class="hljs-string">'vbf'</span>,
<span class="hljs-attr">point</span>: <span class="hljs-number">40</span>,
<span class="hljs-attr">x_shift</span>: <span class="hljs-number">0</span>,
<span class="hljs-attr">y_shift</span>: <span class="hljs-number">0</span>,</pre></div>
<p>width: 10 // optional</p>
<div class='highlight'><pre> },
<span class="hljs-string">'m'</span>: {
<span class="hljs-attr">code</span>: <span class="hljs-string">'v62'</span>,
<span class="hljs-attr">point</span>: <span class="hljs-number">40</span>,
<span class="hljs-attr">x_shift</span>: <span class="hljs-number">0</span>,
<span class="hljs-attr">y_shift</span>: <span class="hljs-number">0</span>,</pre></div>
<p>width: 10 // optional</p>
<div class='highlight'><pre> },
<span class="hljs-string">'s'</span>: {
<span class="hljs-attr">code</span>: <span class="hljs-string">'v4a'</span>,
<span class="hljs-attr">point</span>: <span class="hljs-number">40</span>,
<span class="hljs-attr">x_shift</span>: <span class="hljs-number">0</span>,
<span class="hljs-attr">y_shift</span>: <span class="hljs-number">0</span>,</pre></div>
<p>width: 10 // optional</p>
<div class='highlight'><pre> },
<span class="hljs-string">'z'</span>: {
<span class="hljs-attr">code</span>: <span class="hljs-string">'v80'</span>,
<span class="hljs-attr">point</span>: <span class="hljs-number">40</span>,
<span class="hljs-attr">x_shift</span>: <span class="hljs-number">0</span>,
<span class="hljs-attr">y_shift</span>: <span class="hljs-number">0</span>,</pre></div>
<p>width: 10 // optional</p>
<div class='highlight'><pre> },
<span class="hljs-string">'coda'</span>: {
<span class="hljs-attr">code</span>: <span class="hljs-string">'v4d'</span>,
<span class="hljs-attr">point</span>: <span class="hljs-number">40</span>,
<span class="hljs-attr">x_shift</span>: <span class="hljs-number">0</span>,
<span class="hljs-attr">y_shift</span>: <span class="hljs-number">-8</span>,</pre></div>
<p>width: 10 // optional</p>
<div class='highlight'><pre> },
<span class="hljs-string">'pedal_open'</span>: {
<span class="hljs-attr">code</span>: <span class="hljs-string">'v36'</span>,
<span class="hljs-attr">point</span>: <span class="hljs-number">40</span>,
<span class="hljs-attr">x_shift</span>: <span class="hljs-number">0</span>,
<span class="hljs-attr">y_shift</span>: <span class="hljs-number">0</span>,
},
<span class="hljs-string">'pedal_close'</span>: {
<span class="hljs-attr">code</span>: <span class="hljs-string">'v5d'</span>,
<span class="hljs-attr">point</span>: <span class="hljs-number">40</span>,
<span class="hljs-attr">x_shift</span>: <span class="hljs-number">0</span>,
<span class="hljs-attr">y_shift</span>: <span class="hljs-number">3</span>,
},
<span class="hljs-string">'caesura_straight'</span>: {
<span class="hljs-attr">code</span>: <span class="hljs-string">'v34'</span>,
<span class="hljs-attr">point</span>: <span class="hljs-number">40</span>,
<span class="hljs-attr">x_shift</span>: <span class="hljs-number">0</span>,
<span class="hljs-attr">y_shift</span>: <span class="hljs-number">2</span>,
},
<span class="hljs-string">'caesura_curved'</span>: {
<span class="hljs-attr">code</span>: <span class="hljs-string">'v4b'</span>,
<span class="hljs-attr">point</span>: <span class="hljs-number">40</span>,
<span class="hljs-attr">x_shift</span>: <span class="hljs-number">0</span>,
<span class="hljs-attr">y_shift</span>: <span class="hljs-number">2</span>,
},
<span class="hljs-string">'breath'</span>: {
<span class="hljs-attr">code</span>: <span class="hljs-string">'v6c'</span>,
<span class="hljs-attr">point</span>: <span class="hljs-number">40</span>,
<span class="hljs-attr">x_shift</span>: <span class="hljs-number">0</span>,
<span class="hljs-attr">y_shift</span>: <span class="hljs-number">0</span>,
},
<span class="hljs-string">'tick'</span>: {
<span class="hljs-attr">code</span>: <span class="hljs-string">'v6f'</span>,
<span class="hljs-attr">point</span>: <span class="hljs-number">50</span>,
<span class="hljs-attr">x_shift</span>: <span class="hljs-number">0</span>,
<span class="hljs-attr">y_shift</span>: <span class="hljs-number">0</span>,
},
<span class="hljs-string">'turn'</span>: {
<span class="hljs-attr">code</span>: <span class="hljs-string">'v72'</span>,
<span class="hljs-attr">point</span>: <span class="hljs-number">40</span>,
<span class="hljs-attr">x_shift</span>: <span class="hljs-number">0</span>,
<span class="hljs-attr">y_shift</span>: <span class="hljs-number">0</span>,
},
<span class="hljs-string">'turn_inverted'</span>: {
<span class="hljs-attr">code</span>: <span class="hljs-string">'v33'</span>,
<span class="hljs-attr">point</span>: <span class="hljs-number">40</span>,
<span class="hljs-attr">x_shift</span>: <span class="hljs-number">0</span>,
<span class="hljs-attr">y_shift</span>: <span class="hljs-number">0</span>,
},</pre></div>
<p>DEPRECATED - please use “mordent_upper” or “mordent_lower”</p>
<div class='highlight'><pre> <span class="hljs-string">'mordent'</span>: {
<span class="hljs-attr">code</span>: <span class="hljs-string">'v1e'</span>,
<span class="hljs-attr">point</span>: <span class="hljs-number">40</span>,
<span class="hljs-attr">x_shift</span>: <span class="hljs-number">0</span>,
<span class="hljs-attr">y_shift</span>: <span class="hljs-number">0</span>,</pre></div>
<p>width: 10 // optional</p>
<div class='highlight'><pre> },
};
}
<span class="hljs-keyword">constructor</span>(text_struct) {
<span class="hljs-keyword">super</span>(text_struct);
<span class="hljs-keyword">this</span>.setAttribute(<span class="hljs-string">'type'</span>, <span class="hljs-string">'TextNote'</span>);</pre></div>
<p>Note properties</p>
<div class='highlight'><pre> <span class="hljs-keyword">this</span>.text = text_struct.text;
<span class="hljs-keyword">this</span>.superscript = text_struct.superscript;
<span class="hljs-keyword">this</span>.subscript = text_struct.subscript;
<span class="hljs-keyword">this</span>.glyph_type = text_struct.glyph;
<span class="hljs-keyword">this</span>.glyph = <span class="hljs-literal">null</span>;
<span class="hljs-keyword">this</span>.font = {
<span class="hljs-attr">family</span>: <span class="hljs-string">'Arial'</span>,
<span class="hljs-attr">size</span>: <span class="hljs-number">12</span>,
<span class="hljs-attr">weight</span>: <span class="hljs-string">''</span>,
};</pre></div>
<p>Set font</p>
<div class='highlight'><pre> <span class="hljs-keyword">if</span> (text_struct.font) <span class="hljs-keyword">this</span>.font = text_struct.font;</pre></div>
<p>Determine and set initial note width. Note that the text width is
an approximation and isn’t very accurate. The only way to accurately
measure the length of text is with <code>canvasmeasureText()</code></p>
<div class='highlight'><pre> <span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.glyph_type) {
<span class="hljs-keyword">const</span> struct = TextNote.GLYPHS[<span class="hljs-keyword">this</span>.glyph_type];
<span class="hljs-keyword">if</span> (!struct) <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> Vex.RERR(<span class="hljs-string">'Invalid glyph type: '</span> + <span class="hljs-keyword">this</span>.glyph_type);
<span class="hljs-keyword">this</span>.glyph = <span class="hljs-keyword">new</span> Glyph(struct.code, struct.point, { <span class="hljs-attr">cache</span>: <span class="hljs-literal">false</span> });
<span class="hljs-keyword">if</span> (struct.width) {
<span class="hljs-keyword">this</span>.setWidth(struct.width);
} <span class="hljs-keyword">else</span> {
<span class="hljs-keyword">this</span>.setWidth(<span class="hljs-keyword">this</span>.glyph.getMetrics().width);
}
<span class="hljs-keyword">this</span>.glyph_struct = struct;
} <span class="hljs-keyword">else</span> {
<span class="hljs-keyword">this</span>.setWidth(Flow.textWidth(<span class="hljs-keyword">this</span>.text));
}
<span class="hljs-keyword">this</span>.line = text_struct.line || <span class="hljs-number">0</span>;
<span class="hljs-keyword">this</span>.smooth = text_struct.smooth || <span class="hljs-literal">false</span>;
<span class="hljs-keyword">this</span>.ignore_ticks = text_struct.ignore_ticks || <span class="hljs-literal">false</span>;
<span class="hljs-keyword">this</span>.justification = TextNote.Justification.LEFT;
}</pre></div>
<p>Set the horizontal justification of the TextNote</p>
<div class='highlight'><pre> setJustification(just) {
<span class="hljs-keyword">this</span>.justification = just;
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>;
}</pre></div>
<p>Set the Stave line on which the note should be placed</p>
<div class='highlight'><pre> setLine(line) {
<span class="hljs-keyword">this</span>.line = line;
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>;
}</pre></div>
<p>Pre-render formatting</p>
<div class='highlight'><pre> preFormat() {
<span class="hljs-keyword">this</span>.checkContext();
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.preFormatted) <span class="hljs-keyword">return</span>;
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.smooth) {
<span class="hljs-keyword">this</span>.setWidth(<span class="hljs-number">0</span>);
} <span class="hljs-keyword">else</span> {
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.glyph) {</pre></div>
<p>Width already set.</p>
<div class='highlight'><pre> } <span class="hljs-keyword">else</span> {
<span class="hljs-keyword">this</span>.setWidth(<span class="hljs-keyword">this</span>.context.measureText(<span class="hljs-keyword">this</span>.text).width);
}
}
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.justification === TextNote.Justification.CENTER) {
<span class="hljs-keyword">this</span>.extraLeftPx = <span class="hljs-keyword">this</span>.width / <span class="hljs-number">2</span>;
} <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.justification === TextNote.Justification.RIGHT) {
<span class="hljs-keyword">this</span>.extraLeftPx = <span class="hljs-keyword">this</span>.width;
}
<span class="hljs-keyword">this</span>.setPreFormatted(<span class="hljs-literal">true</span>);
}</pre></div>
<p>Renders the TextNote</p>
<div class='highlight'><pre> draw() {
<span class="hljs-keyword">this</span>.checkContext();
<span class="hljs-keyword">if</span> (!<span class="hljs-keyword">this</span>.stave) {
<span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> Vex.RERR(<span class="hljs-string">'NoStave'</span>, <span class="hljs-string">"Can't draw without a stave."</span>);
}
<span class="hljs-keyword">this</span>.setRendered();
<span class="hljs-keyword">const</span> ctx = <span class="hljs-keyword">this</span>.context;
<span class="hljs-keyword">let</span> x = <span class="hljs-keyword">this</span>.getAbsoluteX();
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.justification === TextNote.Justification.CENTER) {
x -= <span class="hljs-keyword">this</span>.getWidth() / <span class="hljs-number">2</span>;
} <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.justification === TextNote.Justification.RIGHT) {
x -= <span class="hljs-keyword">this</span>.getWidth();
}
<span class="hljs-keyword">let</span> y;
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.glyph) {
y = <span class="hljs-keyword">this</span>.stave.getYForLine(<span class="hljs-keyword">this</span>.line + <span class="hljs-number">-3</span>);
<span class="hljs-keyword">this</span>.glyph.render(
<span class="hljs-keyword">this</span>.context,
x + <span class="hljs-keyword">this</span>.glyph_struct.x_shift,
y + <span class="hljs-keyword">this</span>.glyph_struct.y_shift
);
} <span class="hljs-keyword">else</span> {
y = <span class="hljs-keyword">this</span>.stave.getYForLine(<span class="hljs-keyword">this</span>.line + <span class="hljs-number">-3</span>);
<span class="hljs-keyword">this</span>.applyStyle(ctx);
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);
ctx.fillText(<span class="hljs-keyword">this</span>.text, x, y);</pre></div>
<p>Width of the letter M gives us the approximate height of the text</p>
<div class='highlight'><pre> <span class="hljs-keyword">const</span> height = ctx.measureText(<span class="hljs-string">'M'</span>).width;</pre></div>
<p>Get accurate width of text</p>
<div class='highlight'><pre> <span class="hljs-keyword">const</span> width = ctx.measureText(<span class="hljs-keyword">this</span>.text).width;</pre></div>
<p>Write superscript</p>
<div class='highlight'><pre> <span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.superscript) {
ctx.setFont(<span class="hljs-keyword">this</span>.font.family, <span class="hljs-keyword">this</span>.font.size / <span class="hljs-number">1.3</span>, <span class="hljs-keyword">this</span>.font.weight);
ctx.fillText(<span class="hljs-keyword">this</span>.superscript, x + width + <span class="hljs-number">2</span>, y - (height / <span class="hljs-number">2.2</span>));
}</pre></div>
<p>Write subscript</p>
<div class='highlight'><pre> <span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.subscript) {
ctx.setFont(<span class="hljs-keyword">this</span>.font.family, <span class="hljs-keyword">this</span>.font.size / <span class="hljs-number">1.3</span>, <span class="hljs-keyword">this</span>.font.weight);
ctx.fillText(<span class="hljs-keyword">this</span>.subscript, x + width + <span class="hljs-number">2</span>, y + (height / <span class="hljs-number">2.2</span>) - <span class="hljs-number">1</span>);
}
<span class="hljs-keyword">this</span>.restoreStyle(ctx);
}
}
}</pre></div>
<div class="fleur">h</div>
</div>
</div>
</body>
</html>