How do I draw a single note?

[ego-lay-atman-bay]

How can I draw a single note that is not on a stave? I'm making a dropdown that has multiple note durations.

[AaronDavidNewman]

There are a couple of ways. You can 'freehand' render any glyph supported by the application in the SVG graphics context. Based on your use case, though, I'm thinking you might want to use the glyphs from the SMUFL music fonts, and render them like a normal icon.

To just render glyphs on the existing graphics context, for any glyph supported in VexFlow, at coordinates x,y and the given font size:

        const glyph = new VF.Glyph(glyphCode.code, fontSize);
        glyph.render(this.context.getContext(), x, y);

If you want to make a dropdown (that is presumably html instead of svg), you could just use the font codes and get a copy of the actual font.

@font-face {
  font-family: 'Bravura';
  src:
    url('fonts/BravuraText_1-393.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
.icon-bravura {
  font-family: 'Bravura'!important;
  font-size: 24px;
  position: absolute;
  top: calc(50% - 12px);
}

.icon-accidentalFlat:before {
  content: "\e260";
}

Now any span in html, or text element in svg, with 'icon-accidentalFlat' class would show the flat sign, you could do the same with note head and flag glyphs in the font.

For smoosic, I created a font with common note symbols (the smoosic font!) that you can just use. For instance:

@font-face {
  font-family: 'smoosic';
  src:
    url('fonts/smoosic.ttf?6i0ney') format('truetype'),
    url('fonts/smoosic.woff?6i0ney') format('woff'),
    url('fonts/smoosic.svg?6i0ney#smoosic') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

.icon-note:before {
    content: "\e901";
}

any span with icon note looks like:

I did this since most music notes are actually combinations of glyphs, it was easier just to create the composite symbols in a raster drawing app, export to a font file, and render them as SVG.

[ego-lay-atman-bay]

I actually thought of using the unicode symbols, I just didn't think of using a font. I'm probably just gonna use the smoosic font for this.

edit: actually I think I'll use the BravuraText font