https://github.com/eiskalteschatten/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.
https://github.com/eiskalteschatten/music-staff-js

canvas canvas2d

Last synced: 15 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/eiskalteschatten/music-staff-js
• Owner: eiskalteschatten
• License: gpl-3.0
• Created: 2022-12-02T13:26:29.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2022-12-03T10:41:00.000Z (almost 2 years ago)
• Last Synced: 2024-10-17T08:49:39.997Z (about 1 month ago)
• Topics: canvas, canvas2d
• Language: JavaScript
• Homepage:
• Size: 163 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 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](https://github.com/eiskalteschatten/music-staff-js/blob/main/screenshots/dark-mode.jpg?raw=true)

*Dark Mode*

![Light Mode](https://github.com/eiskalteschatten/music-staff-js/blob/main/screenshots/light-mode.jpg?raw=true)

*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