music-staff-js

An example of how to draw a music staff with whole, half and quarter notes using JavaScript and the HTML 5 canvas tag.

To run it, clone the repository and open index.html in your favorite browser.

Here are a couple of screenshots:

Dark Mode

Light Mode

Image Sources

• Bass clef: https://de.wikipedia.org/wiki/Datei:FClef.svg
• Whole note: https://commons.wikimedia.org/wiki/File:WholeNote.svg
• Half note: https://commons.wikimedia.org/wiki/File:Half_note_with_upwards_stem.svg
• Quarter note: https://commons.wikimedia.org/wiki/File:Quarter_note_with_upwards_stem.svg

I created the white versions and converted them to PNGs for this project.

---

Alex Seifert - https://www.alexseifert.com