From b33114ded1f423f097dfafe0f7d61dd5d5b65a4a Mon Sep 17 00:00:00 2001 From: Matt Huntington Date: Tue, 28 Jul 2020 09:48:27 -0400 Subject: [PATCH] dynamic stave width --- app.css | 4 ++++ app.js | 12 ++++++------ index.html | 6 ++++++ 3 files changed, 16 insertions(+), 6 deletions(-) create mode 100644 app.css diff --git a/app.css b/app.css new file mode 100644 index 0000000..d5ed6c7 --- /dev/null +++ b/app.css @@ -0,0 +1,4 @@ +body { + padding: 0 10%; + margin:0; +} diff --git a/app.js b/app.js index c8e236b..7e5cfd1 100644 --- a/app.js +++ b/app.js @@ -1,11 +1,11 @@ const VF = Vex.Flow; // Create an SVG renderer and attach it to the DIV element named "boo". -const div = document.querySelector("body") -const renderer = new VF.Renderer(div, VF.Renderer.Backends.SVG); +const musicSection = document.querySelector("#music"); +const renderer = new VF.Renderer(musicSection, VF.Renderer.Backends.SVG); // Size our SVG: -renderer.resize(1200, 1200); +renderer.resize(musicSection.offsetWidth+1, 1200); // And get a drawing context: const context = renderer.getContext(); @@ -36,9 +36,8 @@ const returnNewNote = () => { } const drawNotes = (measureNum) => { - const staveWidth = 550; - // Create a stave at position 10, 40 of width 400 on the canvas. - const stave = new VF.Stave(10+(measureNum*staveWidth), 40, staveWidth); + const staveWidth = musicSection.offsetWidth/3; + const stave = new VF.Stave(measureNum*staveWidth, 40, staveWidth); // Add a clef and time signature. if(measureNum === 0){ @@ -80,3 +79,4 @@ const drawNotes = (measureNum) => { drawNotes(0); drawNotes(1); +drawNotes(2); diff --git a/index.html b/index.html index 37277cd..77059a8 100644 --- a/index.html +++ b/index.html @@ -4,8 +4,14 @@ + +
+
+ +
+