From e153c37fc70efdca644db9644b06971db47cb1de Mon Sep 17 00:00:00 2001 From: "Ron B. Yeh" Date: Mon, 26 Aug 2024 11:14:07 -0700 Subject: [PATCH] Docs updated automatically by running `grunt`. --- docs/api/assets/highlight.css | 24 ++++++++++++------------ docs/api/classes/Accidental.html | 6 +++--- docs/api/classes/Annotation.html | 6 +++--- docs/api/classes/Articulation.html | 6 +++--- docs/api/classes/BarNote.html | 6 +++--- docs/api/classes/Barline.html | 6 +++--- docs/api/classes/Beam.html | 10 +++++----- docs/api/classes/Bend.html | 8 ++++---- docs/api/classes/ChordSymbol.html | 6 +++--- docs/api/classes/Clef.html | 6 +++--- docs/api/classes/ClefNote.html | 6 +++--- docs/api/classes/Crescendo.html | 6 +++--- docs/api/classes/Curve.html | 6 +++--- docs/api/classes/Dot.html | 6 +++--- docs/api/classes/Element.html | 6 +++--- docs/api/classes/Factory.html | 2 +- docs/api/classes/Flow.html | 4 ++-- docs/api/classes/FretHandFinger.html | 6 +++--- docs/api/classes/GhostNote.html | 6 +++--- docs/api/classes/Glyph.html | 6 +++--- docs/api/classes/GlyphNote.html | 6 +++--- docs/api/classes/GraceNote.html | 6 +++--- docs/api/classes/GraceNoteGroup.html | 6 +++--- docs/api/classes/GraceTabNote.html | 6 +++--- docs/api/classes/KeySigNote.html | 6 +++--- docs/api/classes/KeySignature.html | 6 +++--- docs/api/classes/Modifier.html | 6 +++--- docs/api/classes/MultiMeasureRest.html | 6 +++--- docs/api/classes/Note.html | 6 +++--- docs/api/classes/NoteHead.html | 6 +++--- docs/api/classes/NoteSubGroup.html | 6 +++--- docs/api/classes/Ornament.html | 6 +++--- docs/api/classes/Parenthesis.html | 6 +++--- docs/api/classes/PedalMarking.html | 6 +++--- docs/api/classes/RepeatNote.html | 6 +++--- docs/api/classes/Repetition.html | 6 +++--- docs/api/classes/Stave.html | 6 +++--- docs/api/classes/StaveConnector.html | 6 +++--- docs/api/classes/StaveHairpin.html | 6 +++--- docs/api/classes/StaveLine.html | 6 +++--- docs/api/classes/StaveModifier.html | 6 +++--- docs/api/classes/StaveNote.html | 6 +++--- docs/api/classes/StaveSection.html | 6 +++--- docs/api/classes/StaveTempo.html | 6 +++--- docs/api/classes/StaveText.html | 6 +++--- docs/api/classes/StaveTie.html | 6 +++--- docs/api/classes/Stem.html | 6 +++--- docs/api/classes/StemmableNote.html | 6 +++--- docs/api/classes/StringNumber.html | 6 +++--- docs/api/classes/Stroke.html | 6 +++--- docs/api/classes/System.html | 6 +++--- docs/api/classes/TabNote.html | 6 +++--- docs/api/classes/TabSlide.html | 6 +++--- docs/api/classes/TabStave.html | 6 +++--- docs/api/classes/TabTie.html | 6 +++--- docs/api/classes/TextBracket.html | 6 +++--- docs/api/classes/TextDynamics.html | 6 +++--- docs/api/classes/TextNote.html | 6 +++--- docs/api/classes/Tickable.html | 6 +++--- docs/api/classes/TimeSigNote.html | 6 +++--- docs/api/classes/TimeSignature.html | 6 +++--- docs/api/classes/TimeSignatureGlyph.html | 6 +++--- docs/api/classes/Tremolo.html | 6 +++--- docs/api/classes/Tuplet.html | 6 +++--- docs/api/classes/Vibrato.html | 6 +++--- docs/api/classes/VibratoBracket.html | 6 +++--- docs/api/classes/Voice.html | 6 +++--- docs/api/classes/Volta.html | 6 +++--- docs/api/index.html | 6 +++--- 69 files changed, 216 insertions(+), 216 deletions(-) diff --git a/docs/api/assets/highlight.css b/docs/api/assets/highlight.css index 0c146d0e13..db063855a8 100644 --- a/docs/api/assets/highlight.css +++ b/docs/api/assets/highlight.css @@ -11,18 +11,18 @@ --dark-hl-4: #CE9178; --light-hl-5: #008000; --dark-hl-5: #6A9955; - --light-hl-6: #000000; - --dark-hl-6: #D4D4D4; - --light-hl-7: #A31515; - --dark-hl-7: #CE9178; - --light-hl-8: #0000FF; - --dark-hl-8: #569CD6; - --light-hl-9: #0070C1; - --dark-hl-9: #4FC1FF; - --light-hl-10: #001080; - --dark-hl-10: #9CDCFE; - --light-hl-11: #795E26; - --dark-hl-11: #DCDCAA; + --light-hl-6: #795E26; + --dark-hl-6: #DCDCAA; + --light-hl-7: #000000; + --dark-hl-7: #D4D4D4; + --light-hl-8: #A31515; + --dark-hl-8: #CE9178; + --light-hl-9: #0000FF; + --dark-hl-9: #569CD6; + --light-hl-10: #0070C1; + --dark-hl-10: #4FC1FF; + --light-hl-11: #001080; + --dark-hl-11: #9CDCFE; --light-hl-12: #098658; --dark-hl-12: #B5CEA8; --light-hl-13: #267F99; diff --git a/docs/api/classes/Accidental.html b/docs/api/classes/Accidental.html index 11e4cfd721..488b4b9eb8 100644 --- a/docs/api/classes/Accidental.html +++ b/docs/api/classes/Accidental.html @@ -847,14 +847,14 @@

setStyle

Set the element style used to render.

Example:

-
element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
element.draw();
+
element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
element.draw();
 

 
Note: If the element draws additional sub-elements (ie.: Modifiers in a Stave),
 the style can be applied to all of them by means of the context:

-
element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
element.getContext().setFillStyle('red');
element.getContext().setStrokeStyle('red');
element.draw();
+
element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
element.getContext().setFillStyle('red');
element.getContext().setStrokeStyle('red');
element.draw();
 

 
or using drawWithStyle:

-
element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
element.drawWithStyle();
+
element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
element.drawWithStyle();
diff --git a/docs/api/classes/Annotation.html b/docs/api/classes/Annotation.html index 874b9ddc3c..4e390403da 100644 --- a/docs/api/classes/Annotation.html +++ b/docs/api/classes/Annotation.html @@ -866,14 +866,14 @@

setStyle

Set the element style used to render.

Example:

-
element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
element.draw();
+
element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
element.draw();
 

 
Note: If the element draws additional sub-elements (ie.: Modifiers in a Stave),
 the style can be applied to all of them by means of the context:

-
element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
element.getContext().setFillStyle('red');
element.getContext().setStrokeStyle('red');
element.draw();
+
element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
element.getContext().setFillStyle('red');
element.getContext().setStrokeStyle('red');
element.draw();
 

 
or using drawWithStyle:

-
element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
element.drawWithStyle();
+
element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
element.drawWithStyle();
diff --git a/docs/api/classes/Articulation.html b/docs/api/classes/Articulation.html index 06eb5da407..cdff026c4c 100644 --- a/docs/api/classes/Articulation.html +++ b/docs/api/classes/Articulation.html @@ -853,14 +853,14 @@

setStyle

Set the element style used to render.

Example:

-
element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
element.draw();
+
element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
element.draw();
 

 
Note: If the element draws additional sub-elements (ie.: Modifiers in a Stave),
 the style can be applied to all of them by means of the context:

-
element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
element.getContext().setFillStyle('red');
element.getContext().setStrokeStyle('red');
element.draw();
+
element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
element.getContext().setFillStyle('red');
element.getContext().setStrokeStyle('red');
element.draw();
 

 
or using drawWithStyle:

-
element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
element.drawWithStyle();
+
element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
element.drawWithStyle();
diff --git a/docs/api/classes/BarNote.html b/docs/api/classes/BarNote.html index e2f2bfcf88..c14affef22 100644 --- a/docs/api/classes/BarNote.html +++ b/docs/api/classes/BarNote.html @@ -1526,14 +1526,14 @@

setStyle

Set the element style used to render.

Example:

-
element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
element.draw();
+
element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
element.draw();
 

 
Note: If the element draws additional sub-elements (ie.: Modifiers in a Stave),
 the style can be applied to all of them by means of the context:

-
element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
element.getContext().setFillStyle('red');
element.getContext().setStrokeStyle('red');
element.draw();
+
element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
element.getContext().setFillStyle('red');
element.getContext().setStrokeStyle('red');
element.draw();
 

 
or using drawWithStyle:

-
element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
element.drawWithStyle();
+
element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
element.drawWithStyle();
diff --git a/docs/api/classes/Barline.html b/docs/api/classes/Barline.html index eb46e18c2c..88e4d120a6 100644 --- a/docs/api/classes/Barline.html +++ b/docs/api/classes/Barline.html @@ -812,14 +812,14 @@

setStyle

Set the element style used to render.

Example:

-
element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
element.draw();
+
element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
element.draw();
 

 
Note: If the element draws additional sub-elements (ie.: Modifiers in a Stave),
 the style can be applied to all of them by means of the context:

-
element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
element.getContext().setFillStyle('red');
element.getContext().setStrokeStyle('red');
element.draw();
+
element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
element.getContext().setFillStyle('red');
element.getContext().setStrokeStyle('red');
element.draw();
 

 
or using drawWithStyle:

-
element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
element.drawWithStyle();
+
element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
element.drawWithStyle();
diff --git a/docs/api/classes/Beam.html b/docs/api/classes/Beam.html index 54be61d6fd..4d2eddd399 100644 --- a/docs/api/classes/Beam.html +++ b/docs/api/classes/Beam.html @@ -779,7 +779,7 @@

setPartialBeamSideAt -
 ┌───┬──┬──┐      ┌──┬──┬──┐
 │   ├─ │ ─┤  vs  │ ─┤  │ ─┤
 │   │  │  │      │  │  │  │
+
 ┌───┬──┬──┐      ┌──┬──┬──┐
 │   ├─ │ ─┤  vs  │ ─┤  │ ─┤
 │   │  │  │      │  │  │  │

@@ -811,14 +811,14 @@

setStyle

Set the element style used to render.

Example:

-
element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
element.draw();
+
element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
element.draw();
 

 
Note: If the element draws additional sub-elements (ie.: Modifiers in a Stave),
 the style can be applied to all of them by means of the context:

-
element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
element.getContext().setFillStyle('red');
element.getContext().setStrokeStyle('red');
element.draw();
+
element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
element.getContext().setFillStyle('red');
element.getContext().setStrokeStyle('red');
element.draw();
 

 
or using drawWithStyle:

-
element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
element.drawWithStyle();
+
element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
element.drawWithStyle();
@@ -874,7 +874,7 @@

Static

A helper function to autimatically build beams for a voice with configuration options.

Example configuration object:

-
config = {
  groups: [new Vex.Flow.Fraction(2, 8)],
  stem_direction: -1,
  beam_rests: true,
  beam_middle_only: true,
  show_stemlets: false
};
+
config = {
  groups: [new Vex.Flow.Fraction(2, 8)],
  stem_direction: -1,
  beam_rests: true,
  beam_middle_only: true,
  show_stemlets: false
};

diff --git a/docs/api/classes/Bend.html b/docs/api/classes/Bend.html index 4be36b8b61..d978479ace 100644 --- a/docs/api/classes/Bend.html +++ b/docs/api/classes/Bend.html @@ -116,7 +116,7 @@

constructornew Bend(text, release?, phrase?): Bend

  • Example of a phrase:

    -
       [{
        type: UP,
        text: "whole"
        width: 8;
      },
      {
        type: DOWN,
        text: "whole"
        width: 8;
      },
      {
        type: UP,
        text: "half"
        width: 8;
      },
      {
        type: UP,
        text: "whole"
        width: 8;
      },
      {
        type: DOWN,
        text: "1 1/2"
        width: 8;
      }]
+
       [{
        type: UP,
        text: "whole"
        width: 8;
      },
      {
        type: DOWN,
        text: "whole"
        width: 8;
      },
      {
        type: UP,
        text: "half"
        width: 8;
      },
      {
        type: UP,
        text: "whole"
        width: 8;
      },
      {
        type: DOWN,
        text: "1 1/2"
        width: 8;
      }]
    @@ -865,14 +865,14 @@

    setStyle

    Set the element style used to render.

    Example:

    -
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
 
    
 
    Note: If the element draws additional sub-elements (ie.: Modifiers in a Stave),
 the style can be applied to all of them by means of the context:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
 
    
 
    or using drawWithStyle:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
    diff --git a/docs/api/classes/ChordSymbol.html b/docs/api/classes/ChordSymbol.html index ee491e5aa9..fd67815473 100644 --- a/docs/api/classes/ChordSymbol.html +++ b/docs/api/classes/ChordSymbol.html @@ -1168,14 +1168,14 @@

    setStyle

    Set the element style used to render.

    Example:

    -
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
 
    
 
    Note: If the element draws additional sub-elements (ie.: Modifiers in a Stave),
 the style can be applied to all of them by means of the context:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
 
    
 
    or using drawWithStyle:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
    diff --git a/docs/api/classes/Clef.html b/docs/api/classes/Clef.html index c2f2a56e6f..3ca280f17f 100644 --- a/docs/api/classes/Clef.html +++ b/docs/api/classes/Clef.html @@ -781,14 +781,14 @@

    setStyle

    Set the element style used to render.

    Example:

    -
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
 
    
 
    Note: If the element draws additional sub-elements (ie.: Modifiers in a Stave),
 the style can be applied to all of them by means of the context:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
 
    
 
    or using drawWithStyle:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
    diff --git a/docs/api/classes/ClefNote.html b/docs/api/classes/ClefNote.html index 58f84c3056..144dac6478 100644 --- a/docs/api/classes/ClefNote.html +++ b/docs/api/classes/ClefNote.html @@ -1517,14 +1517,14 @@

    setStyle

    Set the element style used to render.

    Example:

    -
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
 
    
 
    Note: If the element draws additional sub-elements (ie.: Modifiers in a Stave),
 the style can be applied to all of them by means of the context:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
 
    
 
    or using drawWithStyle:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
    diff --git a/docs/api/classes/Crescendo.html b/docs/api/classes/Crescendo.html index 1cfe981eaa..b1f9dcc9b2 100644 --- a/docs/api/classes/Crescendo.html +++ b/docs/api/classes/Crescendo.html @@ -1550,14 +1550,14 @@

    setStyle

    Set the element style used to render.

    Example:

    -
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
 
    
 
    Note: If the element draws additional sub-elements (ie.: Modifiers in a Stave),
 the style can be applied to all of them by means of the context:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
 
    
 
    or using drawWithStyle:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
    diff --git a/docs/api/classes/Curve.html b/docs/api/classes/Curve.html index 3104818320..f6093ea34e 100644 --- a/docs/api/classes/Curve.html +++ b/docs/api/classes/Curve.html @@ -658,14 +658,14 @@

    setStyle

    Set the element style used to render.

    Example:

    -
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
 
    
 
    Note: If the element draws additional sub-elements (ie.: Modifiers in a Stave),
 the style can be applied to all of them by means of the context:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
 
    
 
    or using drawWithStyle:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
    diff --git a/docs/api/classes/Dot.html b/docs/api/classes/Dot.html index 9f2d15a842..b176635d9b 100644 --- a/docs/api/classes/Dot.html +++ b/docs/api/classes/Dot.html @@ -822,14 +822,14 @@

    setStyle

    Set the element style used to render.

    Example:

    -
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
 
    
 
    Note: If the element draws additional sub-elements (ie.: Modifiers in a Stave),
 the style can be applied to all of them by means of the context:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
 
    
 
    or using drawWithStyle:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
    diff --git a/docs/api/classes/Element.html b/docs/api/classes/Element.html index 25abccffec..e80840cc3a 100644 --- a/docs/api/classes/Element.html +++ b/docs/api/classes/Element.html @@ -566,14 +566,14 @@

    setStyle

    Set the element style used to render.

    Example:

    -
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
 
    
 
    Note: If the element draws additional sub-elements (ie.: Modifiers in a Stave),
 the style can be applied to all of them by means of the context:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
 
    
 
    or using drawWithStyle:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
    diff --git a/docs/api/classes/Factory.html b/docs/api/classes/Factory.html index c640abe28d..3ed7fb4156 100644 --- a/docs/api/classes/Factory.html +++ b/docs/api/classes/Factory.html @@ -281,7 +281,7 @@

    EasyScoreEasyScore(options?): EasyScore

  • Creates EasyScore. Normally the first step after constructing a Factory. For example:

    -
    const vf: Factory = new Vex.Flow.Factory({renderer: { elementId: 'boo', width: 1200, height: 600 }});
    const score: EasyScore = vf.EasyScore();
+
    const vf: Factory = new Vex.Flow.Factory({renderer: { elementId: 'boo', width: 1200, height: 600 }});
    const score: EasyScore = vf.EasyScore();
    diff --git a/docs/api/classes/Flow.html b/docs/api/classes/Flow.html index 36b75612a9..b0a92b7234 100644 --- a/docs/api/classes/Flow.html +++ b/docs/api/classes/Flow.html @@ -752,7 +752,7 @@

    Static setMusicFont(...fontNames): Font[]

  • Examples:

    -
    Vex.Flow.setMusicFont('Petaluma');
    Vex.Flow.setMusicFont('Bravura', 'Gonville');
+
    Vex.Flow.setMusicFont('Petaluma');
    Vex.Flow.setMusicFont('Bravura', 'Gonville');
 
    
 
    CASE 1: You are using vexflow.js, which includes all music fonts (Bravura, Gonville, Petaluma, Custom).
 In this case, calling this method is optional, since VexFlow already defaults to a music font stack of:
@@ -762,7 +762,7 @@ 
    Static CASE 3: You are using the light weight vexflow-core.js to take advantage of lazy loading for fonts.
 In this case, the default music font stack is empty.
 Example:
    
-
    await Vex.Flow.fetchMusicFont('Petaluma');
    Vex.Flow.setMusicFont('Petaluma');
    ... (do VexFlow stuff) ...
+
    await Vex.Flow.fetchMusicFont('Petaluma');
    Vex.Flow.setMusicFont('Petaluma');
    ... (do VexFlow stuff) ...
 
    
 
    See demos/fonts/ for more examples.
    diff --git a/docs/api/classes/FretHandFinger.html b/docs/api/classes/FretHandFinger.html index 9ad77534ce..1396646561 100644 --- a/docs/api/classes/FretHandFinger.html +++ b/docs/api/classes/FretHandFinger.html @@ -857,14 +857,14 @@

    setStyle

    Set the element style used to render.

    Example:

    -
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
 
    
 
    Note: If the element draws additional sub-elements (ie.: Modifiers in a Stave),
 the style can be applied to all of them by means of the context:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
 
    
 
    or using drawWithStyle:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
    diff --git a/docs/api/classes/GhostNote.html b/docs/api/classes/GhostNote.html index 484bb05808..28770991b7 100644 --- a/docs/api/classes/GhostNote.html +++ b/docs/api/classes/GhostNote.html @@ -1690,14 +1690,14 @@

    setStyle

    Set the element style used to render.

    Example:

    -
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
 
    
 
    Note: If the element draws additional sub-elements (ie.: Modifiers in a Stave),
 the style can be applied to all of them by means of the context:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
 
    
 
    or using drawWithStyle:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
    diff --git a/docs/api/classes/Glyph.html b/docs/api/classes/Glyph.html index c7d5d4bab7..9643a0a6f0 100644 --- a/docs/api/classes/Glyph.html +++ b/docs/api/classes/Glyph.html @@ -793,14 +793,14 @@

    setStyle

    Set the element style used to render.

    Example:

    -
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
 
    
 
    Note: If the element draws additional sub-elements (ie.: Modifiers in a Stave),
 the style can be applied to all of them by means of the context:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
 
    
 
    or using drawWithStyle:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
    diff --git a/docs/api/classes/GlyphNote.html b/docs/api/classes/GlyphNote.html index 4800dedaa1..1a2713aecc 100644 --- a/docs/api/classes/GlyphNote.html +++ b/docs/api/classes/GlyphNote.html @@ -1533,14 +1533,14 @@

    setStyle

    Set the element style used to render.

    Example:

    -
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
 
    
 
    Note: If the element draws additional sub-elements (ie.: Modifiers in a Stave),
 the style can be applied to all of them by means of the context:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
 
    
 
    or using drawWithStyle:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
    diff --git a/docs/api/classes/GraceNote.html b/docs/api/classes/GraceNote.html index 22c747354c..579d0c570f 100644 --- a/docs/api/classes/GraceNote.html +++ b/docs/api/classes/GraceNote.html @@ -2054,14 +2054,14 @@

    setStyle

    Set the element style used to render.

    Example:

    -
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
 
    
 
    Note: If the element draws additional sub-elements (ie.: Modifiers in a Stave),
 the style can be applied to all of them by means of the context:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
 
    
 
    or using drawWithStyle:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
    diff --git a/docs/api/classes/GraceNoteGroup.html b/docs/api/classes/GraceNoteGroup.html index 581955e27b..17f8e3f7aa 100644 --- a/docs/api/classes/GraceNoteGroup.html +++ b/docs/api/classes/GraceNoteGroup.html @@ -847,14 +847,14 @@

    setStyle

    Set the element style used to render.

    Example:

    -
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
 
    
 
    Note: If the element draws additional sub-elements (ie.: Modifiers in a Stave),
 the style can be applied to all of them by means of the context:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
 
    
 
    or using drawWithStyle:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
    diff --git a/docs/api/classes/GraceTabNote.html b/docs/api/classes/GraceTabNote.html index f491b0bfd1..a311bae9cc 100644 --- a/docs/api/classes/GraceTabNote.html +++ b/docs/api/classes/GraceTabNote.html @@ -1768,14 +1768,14 @@

    setStyle

    Set the element style used to render.

    Example:

    -
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
 
    
 
    Note: If the element draws additional sub-elements (ie.: Modifiers in a Stave),
 the style can be applied to all of them by means of the context:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
 
    
 
    or using drawWithStyle:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
    diff --git a/docs/api/classes/KeySigNote.html b/docs/api/classes/KeySigNote.html index 891014b956..3bcda2802c 100644 --- a/docs/api/classes/KeySigNote.html +++ b/docs/api/classes/KeySigNote.html @@ -1512,14 +1512,14 @@

    setStyle

    Set the element style used to render.

    Example:

    -
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
 
    
 
    Note: If the element draws additional sub-elements (ie.: Modifiers in a Stave),
 the style can be applied to all of them by means of the context:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
 
    
 
    or using drawWithStyle:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
    diff --git a/docs/api/classes/KeySignature.html b/docs/api/classes/KeySignature.html index cdda55b48d..4fd64d9a50 100644 --- a/docs/api/classes/KeySignature.html +++ b/docs/api/classes/KeySignature.html @@ -879,14 +879,14 @@

    setStyle

    Set the element style used to render.

    Example:

    -
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
 
    
 
    Note: If the element draws additional sub-elements (ie.: Modifiers in a Stave),
 the style can be applied to all of them by means of the context:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
 
    
 
    or using drawWithStyle:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
    diff --git a/docs/api/classes/Modifier.html b/docs/api/classes/Modifier.html index 1f2103dcae..92c5944d0b 100644 --- a/docs/api/classes/Modifier.html +++ b/docs/api/classes/Modifier.html @@ -805,14 +805,14 @@

    setStyle

    Set the element style used to render.

    Example:

    -
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
 
    
 
    Note: If the element draws additional sub-elements (ie.: Modifiers in a Stave),
 the style can be applied to all of them by means of the context:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
 
    
 
    or using drawWithStyle:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
    diff --git a/docs/api/classes/MultiMeasureRest.html b/docs/api/classes/MultiMeasureRest.html index cfb193264a..83b654da7d 100644 --- a/docs/api/classes/MultiMeasureRest.html +++ b/docs/api/classes/MultiMeasureRest.html @@ -678,14 +678,14 @@

    setStyle

    Set the element style used to render.

    Example:

    -
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
 
    
 
    Note: If the element draws additional sub-elements (ie.: Modifiers in a Stave),
 the style can be applied to all of them by means of the context:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
 
    
 
    or using drawWithStyle:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
    diff --git a/docs/api/classes/Note.html b/docs/api/classes/Note.html index d3c02ba9fb..9e7096e630 100644 --- a/docs/api/classes/Note.html +++ b/docs/api/classes/Note.html @@ -1489,14 +1489,14 @@

    setStyle

    Set the element style used to render.

    Example:

    -
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
 
    
 
    Note: If the element draws additional sub-elements (ie.: Modifiers in a Stave),
 the style can be applied to all of them by means of the context:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
 
    
 
    or using drawWithStyle:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
    diff --git a/docs/api/classes/NoteHead.html b/docs/api/classes/NoteHead.html index 7cacbacba6..21900c1bc2 100644 --- a/docs/api/classes/NoteHead.html +++ b/docs/api/classes/NoteHead.html @@ -1556,14 +1556,14 @@

    setStyle

    Set the element style used to render.

    Example:

    -
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
 
    
 
    Note: If the element draws additional sub-elements (ie.: Modifiers in a Stave),
 the style can be applied to all of them by means of the context:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
 
    
 
    or using drawWithStyle:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
    diff --git a/docs/api/classes/NoteSubGroup.html b/docs/api/classes/NoteSubGroup.html index da31d8f5d4..38aac440f0 100644 --- a/docs/api/classes/NoteSubGroup.html +++ b/docs/api/classes/NoteSubGroup.html @@ -820,14 +820,14 @@

    setStyle

    Set the element style used to render.

    Example:

    -
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
 
    
 
    Note: If the element draws additional sub-elements (ie.: Modifiers in a Stave),
 the style can be applied to all of them by means of the context:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
 
    
 
    or using drawWithStyle:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
    diff --git a/docs/api/classes/Ornament.html b/docs/api/classes/Ornament.html index 4fbfeabb7c..6e2bab9232 100644 --- a/docs/api/classes/Ornament.html +++ b/docs/api/classes/Ornament.html @@ -925,14 +925,14 @@

    setStyle

    Set the element style used to render.

    Example:

    -
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
 
    
 
    Note: If the element draws additional sub-elements (ie.: Modifiers in a Stave),
 the style can be applied to all of them by means of the context:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
 
    
 
    or using drawWithStyle:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
    diff --git a/docs/api/classes/Parenthesis.html b/docs/api/classes/Parenthesis.html index a886f6f2fe..cc499e8737 100644 --- a/docs/api/classes/Parenthesis.html +++ b/docs/api/classes/Parenthesis.html @@ -809,14 +809,14 @@

    setStyle

    Set the element style used to render.

    Example:

    -
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
 
    
 
    Note: If the element draws additional sub-elements (ie.: Modifiers in a Stave),
 the style can be applied to all of them by means of the context:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
 
    
 
    or using drawWithStyle:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
    diff --git a/docs/api/classes/PedalMarking.html b/docs/api/classes/PedalMarking.html index c7a85526c5..8f3d37b704 100644 --- a/docs/api/classes/PedalMarking.html +++ b/docs/api/classes/PedalMarking.html @@ -690,14 +690,14 @@

    setStyle

    Set the element style used to render.

    Example:

    -
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
 
    
 
    Note: If the element draws additional sub-elements (ie.: Modifiers in a Stave),
 the style can be applied to all of them by means of the context:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
 
    
 
    or using drawWithStyle:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
    diff --git a/docs/api/classes/RepeatNote.html b/docs/api/classes/RepeatNote.html index 387f108b27..336ee78baf 100644 --- a/docs/api/classes/RepeatNote.html +++ b/docs/api/classes/RepeatNote.html @@ -1533,14 +1533,14 @@

    setStyle

    Set the element style used to render.

    Example:

    -
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
 
    
 
    Note: If the element draws additional sub-elements (ie.: Modifiers in a Stave),
 the style can be applied to all of them by means of the context:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
 
    
 
    or using drawWithStyle:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
    diff --git a/docs/api/classes/Repetition.html b/docs/api/classes/Repetition.html index 97349ba243..78281b2c3c 100644 --- a/docs/api/classes/Repetition.html +++ b/docs/api/classes/Repetition.html @@ -853,14 +853,14 @@

    setStyle

    Set the element style used to render.

    Example:

    -
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
 
    
 
    Note: If the element draws additional sub-elements (ie.: Modifiers in a Stave),
 the style can be applied to all of them by means of the context:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
 
    
 
    or using drawWithStyle:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
    diff --git a/docs/api/classes/Stave.html b/docs/api/classes/Stave.html index c942136740..8be5aab2cf 100644 --- a/docs/api/classes/Stave.html +++ b/docs/api/classes/Stave.html @@ -1270,14 +1270,14 @@

    setStyle

    Set the element style used to render.

    Example:

    -
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
 
    
 
    Note: If the element draws additional sub-elements (ie.: Modifiers in a Stave),
 the style can be applied to all of them by means of the context:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
 
    
 
    or using drawWithStyle:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
    diff --git a/docs/api/classes/StaveConnector.html b/docs/api/classes/StaveConnector.html index 7aaf97123b..8696ee046c 100644 --- a/docs/api/classes/StaveConnector.html +++ b/docs/api/classes/StaveConnector.html @@ -645,14 +645,14 @@

    setStyle

    Set the element style used to render.

    Example:

    -
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
 
    
 
    Note: If the element draws additional sub-elements (ie.: Modifiers in a Stave),
 the style can be applied to all of them by means of the context:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
 
    
 
    or using drawWithStyle:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
    diff --git a/docs/api/classes/StaveHairpin.html b/docs/api/classes/StaveHairpin.html index 5c0068bb85..ebccb3f2cb 100644 --- a/docs/api/classes/StaveHairpin.html +++ b/docs/api/classes/StaveHairpin.html @@ -682,14 +682,14 @@

    setStyle

    Set the element style used to render.

    Example:

    -
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
 
    
 
    Note: If the element draws additional sub-elements (ie.: Modifiers in a Stave),
 the style can be applied to all of them by means of the context:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
 
    
 
    or using drawWithStyle:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
    diff --git a/docs/api/classes/StaveLine.html b/docs/api/classes/StaveLine.html index bb06428d49..c1649e81e2 100644 --- a/docs/api/classes/StaveLine.html +++ b/docs/api/classes/StaveLine.html @@ -662,14 +662,14 @@

    setStyle

    Set the element style used to render.

    Example:

    -
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
 
    
 
    Note: If the element draws additional sub-elements (ie.: Modifiers in a Stave),
 the style can be applied to all of them by means of the context:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
 
    
 
    or using drawWithStyle:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
    diff --git a/docs/api/classes/StaveModifier.html b/docs/api/classes/StaveModifier.html index 0977a41241..3b85ef9365 100644 --- a/docs/api/classes/StaveModifier.html +++ b/docs/api/classes/StaveModifier.html @@ -736,14 +736,14 @@

    setStyle

    Set the element style used to render.

    Example:

    -
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
 
    
 
    Note: If the element draws additional sub-elements (ie.: Modifiers in a Stave),
 the style can be applied to all of them by means of the context:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
 
    
 
    or using drawWithStyle:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
    diff --git a/docs/api/classes/StaveNote.html b/docs/api/classes/StaveNote.html index 6419b1d868..6ab65a424c 100644 --- a/docs/api/classes/StaveNote.html +++ b/docs/api/classes/StaveNote.html @@ -1993,14 +1993,14 @@

    setStyle

    Set the element style used to render.

    Example:

    -
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
 
    
 
    Note: If the element draws additional sub-elements (ie.: Modifiers in a Stave),
 the style can be applied to all of them by means of the context:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
 
    
 
    or using drawWithStyle:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
    diff --git a/docs/api/classes/StaveSection.html b/docs/api/classes/StaveSection.html index bb93577444..bc75421f95 100644 --- a/docs/api/classes/StaveSection.html +++ b/docs/api/classes/StaveSection.html @@ -788,14 +788,14 @@

    setStyle

    Set the element style used to render.

    Example:

    -
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
 
    
 
    Note: If the element draws additional sub-elements (ie.: Modifiers in a Stave),
 the style can be applied to all of them by means of the context:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
 
    
 
    or using drawWithStyle:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
    diff --git a/docs/api/classes/StaveTempo.html b/docs/api/classes/StaveTempo.html index 626bbaccd5..47653affb6 100644 --- a/docs/api/classes/StaveTempo.html +++ b/docs/api/classes/StaveTempo.html @@ -786,14 +786,14 @@

    setStyle

    Set the element style used to render.

    Example:

    -
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
 
    
 
    Note: If the element draws additional sub-elements (ie.: Modifiers in a Stave),
 the style can be applied to all of them by means of the context:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
 
    
 
    or using drawWithStyle:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
    diff --git a/docs/api/classes/StaveText.html b/docs/api/classes/StaveText.html index fafcb88973..8b7e05754f 100644 --- a/docs/api/classes/StaveText.html +++ b/docs/api/classes/StaveText.html @@ -792,14 +792,14 @@

    setStyle

    Set the element style used to render.

    Example:

    -
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
 
    
 
    Note: If the element draws additional sub-elements (ie.: Modifiers in a Stave),
 the style can be applied to all of them by means of the context:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
 
    
 
    or using drawWithStyle:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
    diff --git a/docs/api/classes/StaveTie.html b/docs/api/classes/StaveTie.html index 40022785aa..c78aa8a9ae 100644 --- a/docs/api/classes/StaveTie.html +++ b/docs/api/classes/StaveTie.html @@ -705,14 +705,14 @@

    setStyle

    Set the element style used to render.

    Example:

    -
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
 
    
 
    Note: If the element draws additional sub-elements (ie.: Modifiers in a Stave),
 the style can be applied to all of them by means of the context:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
 
    
 
    or using drawWithStyle:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
    diff --git a/docs/api/classes/Stem.html b/docs/api/classes/Stem.html index 7b1e55f617..bab51db754 100644 --- a/docs/api/classes/Stem.html +++ b/docs/api/classes/Stem.html @@ -730,14 +730,14 @@

    setStyle

    Set the element style used to render.

    Example:

    -
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
 
    
 
    Note: If the element draws additional sub-elements (ie.: Modifiers in a Stave),
 the style can be applied to all of them by means of the context:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
 
    
 
    or using drawWithStyle:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
    diff --git a/docs/api/classes/StemmableNote.html b/docs/api/classes/StemmableNote.html index 441525b380..a8a165ebed 100644 --- a/docs/api/classes/StemmableNote.html +++ b/docs/api/classes/StemmableNote.html @@ -1682,14 +1682,14 @@

    setStyle

    Set the element style used to render.

    Example:

    -
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
 
    
 
    Note: If the element draws additional sub-elements (ie.: Modifiers in a Stave),
 the style can be applied to all of them by means of the context:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
 
    
 
    or using drawWithStyle:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
    diff --git a/docs/api/classes/StringNumber.html b/docs/api/classes/StringNumber.html index 9e5d68258b..e13b23f034 100644 --- a/docs/api/classes/StringNumber.html +++ b/docs/api/classes/StringNumber.html @@ -904,14 +904,14 @@

    setStyle

    Set the element style used to render.

    Example:

    -
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
 
    
 
    Note: If the element draws additional sub-elements (ie.: Modifiers in a Stave),
 the style can be applied to all of them by means of the context:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
 
    
 
    or using drawWithStyle:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
    diff --git a/docs/api/classes/Stroke.html b/docs/api/classes/Stroke.html index 3d7897eb87..64b7715b84 100644 --- a/docs/api/classes/Stroke.html +++ b/docs/api/classes/Stroke.html @@ -860,14 +860,14 @@

    setStyle

    Set the element style used to render.

    Example:

    -
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
 
    
 
    Note: If the element draws additional sub-elements (ie.: Modifiers in a Stave),
 the style can be applied to all of them by means of the context:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
 
    
 
    or using drawWithStyle:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
    diff --git a/docs/api/classes/System.html b/docs/api/classes/System.html index 4441c8886f..8ee0516240 100644 --- a/docs/api/classes/System.html +++ b/docs/api/classes/System.html @@ -699,14 +699,14 @@

    setStyle

    Set the element style used to render.

    Example:

    -
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
 
    
 
    Note: If the element draws additional sub-elements (ie.: Modifiers in a Stave),
 the style can be applied to all of them by means of the context:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
 
    
 
    or using drawWithStyle:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
    diff --git a/docs/api/classes/TabNote.html b/docs/api/classes/TabNote.html index 2112f05662..4876383292 100644 --- a/docs/api/classes/TabNote.html +++ b/docs/api/classes/TabNote.html @@ -1763,14 +1763,14 @@

    setStyle

    Set the element style used to render.

    Example:

    -
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
 
    
 
    Note: If the element draws additional sub-elements (ie.: Modifiers in a Stave),
 the style can be applied to all of them by means of the context:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
 
    
 
    or using drawWithStyle:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
    diff --git a/docs/api/classes/TabSlide.html b/docs/api/classes/TabSlide.html index 7f73f0c760..db6108b9ba 100644 --- a/docs/api/classes/TabSlide.html +++ b/docs/api/classes/TabSlide.html @@ -730,14 +730,14 @@

    setStyle

    Set the element style used to render.

    Example:

    -
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
 
    
 
    Note: If the element draws additional sub-elements (ie.: Modifiers in a Stave),
 the style can be applied to all of them by means of the context:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
 
    
 
    or using drawWithStyle:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
    diff --git a/docs/api/classes/TabStave.html b/docs/api/classes/TabStave.html index 4b951e9528..e6aa98f490 100644 --- a/docs/api/classes/TabStave.html +++ b/docs/api/classes/TabStave.html @@ -1332,14 +1332,14 @@

    setStyle

    Set the element style used to render.

    Example:

    -
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
 
    
 
    Note: If the element draws additional sub-elements (ie.: Modifiers in a Stave),
 the style can be applied to all of them by means of the context:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
 
    
 
    or using drawWithStyle:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
    diff --git a/docs/api/classes/TabTie.html b/docs/api/classes/TabTie.html index ba4d12a728..b0840f7369 100644 --- a/docs/api/classes/TabTie.html +++ b/docs/api/classes/TabTie.html @@ -714,14 +714,14 @@

    setStyle

    Set the element style used to render.

    Example:

    -
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
 
    
 
    Note: If the element draws additional sub-elements (ie.: Modifiers in a Stave),
 the style can be applied to all of them by means of the context:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
 
    
 
    or using drawWithStyle:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
    diff --git a/docs/api/classes/TextBracket.html b/docs/api/classes/TextBracket.html index db3297a170..afb798bb31 100644 --- a/docs/api/classes/TextBracket.html +++ b/docs/api/classes/TextBracket.html @@ -686,14 +686,14 @@

    setStyle

    Set the element style used to render.

    Example:

    -
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
 
    
 
    Note: If the element draws additional sub-elements (ie.: Modifiers in a Stave),
 the style can be applied to all of them by means of the context:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
 
    
 
    or using drawWithStyle:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
    diff --git a/docs/api/classes/TextDynamics.html b/docs/api/classes/TextDynamics.html index 31693391d4..8a424261d9 100644 --- a/docs/api/classes/TextDynamics.html +++ b/docs/api/classes/TextDynamics.html @@ -1542,14 +1542,14 @@

    setStyle

    Set the element style used to render.

    Example:

    -
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
 
    
 
    Note: If the element draws additional sub-elements (ie.: Modifiers in a Stave),
 the style can be applied to all of them by means of the context:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
 
    
 
    or using drawWithStyle:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
    diff --git a/docs/api/classes/TextNote.html b/docs/api/classes/TextNote.html index f0613a9890..050cfdf6b4 100644 --- a/docs/api/classes/TextNote.html +++ b/docs/api/classes/TextNote.html @@ -1566,14 +1566,14 @@

    setStyle

    Set the element style used to render.

    Example:

    -
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
 
    
 
    Note: If the element draws additional sub-elements (ie.: Modifiers in a Stave),
 the style can be applied to all of them by means of the context:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
 
    
 
    or using drawWithStyle:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
    diff --git a/docs/api/classes/Tickable.html b/docs/api/classes/Tickable.html index 5e51a77bcb..c9f12a85c5 100644 --- a/docs/api/classes/Tickable.html +++ b/docs/api/classes/Tickable.html @@ -984,14 +984,14 @@

    setStyle

    Set the element style used to render.

    Example:

    -
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
 
    
 
    Note: If the element draws additional sub-elements (ie.: Modifiers in a Stave),
 the style can be applied to all of them by means of the context:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
 
    
 
    or using drawWithStyle:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
    diff --git a/docs/api/classes/TimeSigNote.html b/docs/api/classes/TimeSigNote.html index 44542bbd36..9e3d4662bc 100644 --- a/docs/api/classes/TimeSigNote.html +++ b/docs/api/classes/TimeSigNote.html @@ -1510,14 +1510,14 @@

    setStyle

    Set the element style used to render.

    Example:

    -
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
 
    
 
    Note: If the element draws additional sub-elements (ie.: Modifiers in a Stave),
 the style can be applied to all of them by means of the context:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
 
    
 
    or using drawWithStyle:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
    diff --git a/docs/api/classes/TimeSignature.html b/docs/api/classes/TimeSignature.html index bc019ba894..0c9b5722fc 100644 --- a/docs/api/classes/TimeSignature.html +++ b/docs/api/classes/TimeSignature.html @@ -888,14 +888,14 @@

    setStyle

    Set the element style used to render.

    Example:

    -
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
 
    
 
    Note: If the element draws additional sub-elements (ie.: Modifiers in a Stave),
 the style can be applied to all of them by means of the context:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
 
    
 
    or using drawWithStyle:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
    diff --git a/docs/api/classes/TimeSignatureGlyph.html b/docs/api/classes/TimeSignatureGlyph.html index 3ef485d337..f963f15a78 100644 --- a/docs/api/classes/TimeSignatureGlyph.html +++ b/docs/api/classes/TimeSignatureGlyph.html @@ -847,14 +847,14 @@

    setStyle

    Set the element style used to render.

    Example:

    -
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
 
    
 
    Note: If the element draws additional sub-elements (ie.: Modifiers in a Stave),
 the style can be applied to all of them by means of the context:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
 
    
 
    or using drawWithStyle:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
    diff --git a/docs/api/classes/Tremolo.html b/docs/api/classes/Tremolo.html index ccd698f76e..4ae669adde 100644 --- a/docs/api/classes/Tremolo.html +++ b/docs/api/classes/Tremolo.html @@ -819,14 +819,14 @@

    setStyle

    Set the element style used to render.

    Example:

    -
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
 
    
 
    Note: If the element draws additional sub-elements (ie.: Modifiers in a Stave),
 the style can be applied to all of them by means of the context:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
 
    
 
    or using drawWithStyle:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
    diff --git a/docs/api/classes/Tuplet.html b/docs/api/classes/Tuplet.html index 4e57ee6f78..0f51e31c5f 100644 --- a/docs/api/classes/Tuplet.html +++ b/docs/api/classes/Tuplet.html @@ -747,14 +747,14 @@

    setStyle

    Set the element style used to render.

    Example:

    -
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
 
    
 
    Note: If the element draws additional sub-elements (ie.: Modifiers in a Stave),
 the style can be applied to all of them by means of the context:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
 
    
 
    or using drawWithStyle:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
    diff --git a/docs/api/classes/Vibrato.html b/docs/api/classes/Vibrato.html index 55fe2096d4..b1495d8fd8 100644 --- a/docs/api/classes/Vibrato.html +++ b/docs/api/classes/Vibrato.html @@ -821,14 +821,14 @@

    setStyle

    Set the element style used to render.

    Example:

    -
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
 
    
 
    Note: If the element draws additional sub-elements (ie.: Modifiers in a Stave),
 the style can be applied to all of them by means of the context:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
 
    
 
    or using drawWithStyle:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
    diff --git a/docs/api/classes/VibratoBracket.html b/docs/api/classes/VibratoBracket.html index 5552918454..4ba34a83b3 100644 --- a/docs/api/classes/VibratoBracket.html +++ b/docs/api/classes/VibratoBracket.html @@ -645,14 +645,14 @@

    setStyle

    Set the element style used to render.

    Example:

    -
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
 
    
 
    Note: If the element draws additional sub-elements (ie.: Modifiers in a Stave),
 the style can be applied to all of them by means of the context:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
 
    
 
    or using drawWithStyle:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
    diff --git a/docs/api/classes/Voice.html b/docs/api/classes/Voice.html index 416e018859..0dd5136fff 100644 --- a/docs/api/classes/Voice.html +++ b/docs/api/classes/Voice.html @@ -804,14 +804,14 @@

    setStyle

    Set the element style used to render.

    Example:

    -
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
 
    
 
    Note: If the element draws additional sub-elements (ie.: Modifiers in a Stave),
 the style can be applied to all of them by means of the context:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
 
    
 
    or using drawWithStyle:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
    diff --git a/docs/api/classes/Volta.html b/docs/api/classes/Volta.html index baf9ca7905..bb9c75dd81 100644 --- a/docs/api/classes/Volta.html +++ b/docs/api/classes/Volta.html @@ -771,14 +771,14 @@

    setStyle

    Set the element style used to render.

    Example:

    -
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.draw();
 
    
 
    Note: If the element draws additional sub-elements (ie.: Modifiers in a Stave),
 the style can be applied to all of them by means of the context:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.getContext().setFillStyle('red');
    element.getContext().setStrokeStyle('red');
    element.draw();
 
    
 
    or using drawWithStyle:
    
-
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
+
    element.setStyle({ fillStyle: 'red', strokeStyle: 'red' });
    element.drawWithStyle();
    diff --git a/docs/api/index.html b/docs/api/index.html index 4933523990..8112d28967 100644 --- a/docs/api/index.html +++ b/docs/api/index.html @@ -21,16 +21,16 @@

    vexflow

    The URL above includes a version number vexflow@x.y.z. Specifying a particular version is good practice, to prevent rare issues with a future update breaking your deployment. During development & testing, feel free to use the latest release by omitting the version number: https://cdn.jsdelivr.net/npm/vexflow/build/cjs/vexflow.js

    If your project uses a bundler, you can install VexFlow from npm:

    -
    npm install vexflow
+
    npm install vexflow
 
    
 
    Read our detailed guide on integrating with VexFlow.
    
 
    EasyScore
    EasyScore is VexFlow's high-level API for creating music notation. On a web page containing a <div id="output"></div>, the following code displays a score:
    
-
    const { Factory, EasyScore, System } = Vex.Flow;

    const vf = new Factory({
      renderer: { elementId: 'output', width: 500, height: 200 },
    });

    const score = vf.EasyScore();
    const system = vf.System();

    system
      .addStave({
        voices: [
          score.voice(score.notes('C#5/q, B4, A4, G#4', { stem: 'up' })),
          score.voice(score.notes('C#4/h, C#4', { stem: 'down' })),
        ],
      })
      .addClef('treble')
      .addTimeSignature('4/4');

    vf.draw();
+
    const { Factory, EasyScore, System } = Vex.Flow;

    const vf = new Factory({
      renderer: { elementId: 'output', width: 500, height: 200 },
    });

    const score = vf.EasyScore();
    const system = vf.System();

    system
      .addStave({
        voices: [
          score.voice(score.notes('C#5/q, B4, A4, G#4', { stem: 'up' })),
          score.voice(score.notes('C#4/h, C#4', { stem: 'down' })),
        ],
      })
      .addClef('treble')
      .addTimeSignature('4/4');

    vf.draw();
 
    
 
    See a running example of EasyScore here.
    
 
    Learn more about EasyScore here.
    
 
    Native API
    If you need more control, you can use the low-level VexFlow API. Below, we render a stave using SVG. See a running example of the low-level API here.
    
-
    const { Renderer, Stave } = Vex.Flow;

    // Create an SVG renderer and attach it to the DIV element with id="output".
    const div = document.getElementById('output');
    const renderer = new Renderer(div, Renderer.Backends.SVG);

    // Configure the rendering context.
    renderer.resize(500, 500);
    const context = renderer.getContext();
    context.setFont('Arial', 10);

    // Create a stave of width 400 at position 10, 40.
    const stave = new Stave(10, 40, 400);

    // Add a clef and time signature.
    stave.addClef('treble').addTimeSignature('4/4');

    // Connect it to the rendering context and draw!
    stave.setContext(context).draw();
+
    const { Renderer, Stave } = Vex.Flow;

    // Create an SVG renderer and attach it to the DIV element with id="output".
    const div = document.getElementById('output');
    const renderer = new Renderer(div, Renderer.Backends.SVG);

    // Configure the rendering context.
    renderer.resize(500, 500);
    const context = renderer.getContext();
    context.setFont('Arial', 10);

    // Create a stave of width 400 at position 10, 40.
    const stave = new Stave(10, 40, 400);

    // Add a clef and time signature.
    stave.addClef('treble').addTimeSignature('4/4');

    // Connect it to the rendering context and draw!
    stave.setContext(context).draw();
 
    
 
    Examples