Hey folks,

i never worked with canvas before and I wonder if it is suitable for a small hobby programm I am writing.

It should represent notes in standard music notation like the upper lines (starting with 4/4), and it should be able to show the tabs as well (see the 4 lines at the bottom, starting with TAB).

Post image

Music notation as traditional and TAB format.

Now, I could instantly think of a way to make this with html & css.
I’d make a standard with span element that has Xpx per beat and either has a note (ascii character) or a number in it when the beat has a note, or just leave it empty when there is no beat to play.

This is how I imagined it: https://docs.google.com/drawings/d/1aDqxOVSyS6V4oVBs4014spXD_5awn8-33Z-eO5e6eIY/edit?usp=sharing

Now, some things cannot be so easily be displayed in my layout, so I wondered if I should just use SVGs or if I should right away jump into canvas.

Things like this would need to be “dynamic” as in: it might go from span 1 to span 2, but could also go to span 5 or onto another “line” (string).

Post image

So, maybe you guys and girls could help me decide if I should go with my html & css approach or if I should look into canvas for this specific projekt.

Things I would like to achive:

  • dynamically creating the tabs / noted from a text file, json or similar

  • Auto-Scroll when it is larger than the viewport or the dedicated space on the viewport (only overflow-y, not x)

  • Mouse-over with a modal / popup / tooltip when you hover over a note (in my case span)

  • on-click eventlistener on various parts

Which of the two options would allow me to get the most of this, which of these two would give me most control? Is one of both stupid to choose for this kind of project?

Thank you all in advance!

Source link

Write A Comment