Chord Font Sizing (Petaluma)

Experiment with VexFlow Chord Symbols!

by ronyeh

HTML

<script src="https://unpkg.com/[email protected]/build/cjs/vexflow-debug.js"></script>
<div id="output"></div>

JavaScript

const {
  Renderer,
  Formatter,
  Stave,
  StaveNote,
  ChordSymbol,
  SymbolModifiers,
  Voice
} = Vex.Flow;

Vex.Flow.Font.loadWebFonts().then(() => {

});


const fontStacks = {
  Bravura: ['Bravura', 'Gonville', 'Custom'],
  Petaluma: ['Petaluma', 'Gonville', 'Custom'],
  Gonville: ['Gonville', 'Bravura', 'Custom'],
};

const musicFontToTextFont = {
  Bravura: 'Roboto Slab',
  Petaluma: 'PetalumaScript',
  Gonville: 'Georgia',
};

Vex.Flow.setMusicFont('Petaluma', 'Gonville', 'Custom');

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

// Configure the rendering context.
renderer.resize(800, 2400);
let y = 45;
const context = renderer.getContext();
context.scale(1.2, 1.2);

// Create a stave of width 400 at position 10, 40 on the canvas.
const fontSizes = [10, 14];


for (const key in fontStacks) {
  const musicFontStack = fontStacks[key];
  fontSizes.forEach((fontSizePt) => {
    Vex.Flow.setMusicFont(...musicFontStack);

    const stave = new Stave(10, y, 500);

    const textFont = musicFontToTextFont[key];
    context.setFont(textFont, fontSizePt);
    context.fillText(Vex.Flow.getMusicFont() + ' → ' + textFont + ' ' + fontSizePt + 'pt', 100, y - 15);

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

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

    // Create the notes
    const notes = [
      // A quarter-note C.
      new StaveNote({
        keys: ['c/4'],
        duration: 'q',
      }),

      // A quarter-note D.
      new StaveNote({
        keys: ['d/4'],
        duration: 'q',
      }),
      new StaveNote({
        keys: ['e/4'],
        duration: 'q',
      }),
      new StaveNote({
        keys: ['f/4'],
        duration: 'q',
      }),
    ];

    const chord1 = new ChordSymbol()
      .addText('F7')
     ...