#trying to add an event listener that tracks mouse position of a vexflow js stave

5 messages · Page 1 of 1 (latest)

cedar wing
#

have never done mouse tracking b4 and I have no idea where to start

# 
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/cjs/vexflow.js"></script>
    <style>
    </style>
    <title>Music Notation</title>
</head>
<body>
    <div id="music-container"></div>
    <script>
        window.onload = function() {
            const VF = Vex.Flow;
            const div = document.getElementById("music-container");
            const renderer = new VF.Renderer(div, VF.Renderer.Backends.SVG);
            renderer.resize(500, 200);

            const context = renderer.getContext();
            const stave = new VF.Stave(0, 0, 500);
            stave.addClef("treble").setContext(context).draw();


        };
    </script>
</body>
</html>
#

i am wanting to use an event listener to place a not on the stave when/where I click it