Added vexflow canvas scaling.

README.rdoc

@@ -34,6 +34,18 @@ By default jquery-vexflow will determine width and height of the element, either
 Alternately, the vexflow method accepts an optional second argument with render options (width and height) which will force width/height:
 
   $("#my-chord").vexflow(["C", "E", "G"], { width: 400, height: 150 });
+
+== Scaling
+
+You can change the scale of the rendering with the data-scale attribute:
+
+  <div class="staff" data-clef="treble" data-staff='["C", "E", "G", "Bb"]' data-scale="0.75" />
+
+  $(".staff").vexflow();
+
+Or specify it as an optional second argument with render options:
+
+  $("#my-chord").vexflow(["C", "E", "G"], { scale: 0.75 });
 
 == Clef(s)
 

examples.html

@@ -20,6 +20,12 @@ <h2>Simple Chord</h2>
     $("#simple-chord").vexflow(["C", "E", "G", "Bb"]);
   </script>
 
+  <h2>Simple Chord</h2>
+  <div id="simple-chord-scaled" data-scale="0.75" width="200"></div>
+  <script type="text/javascript">
+    $("#simple-chord-scaled").vexflow(["C", "E", "G", "Bb"]);
+  </script>
+
   <h2>Simple Chord with Octaves</h2>
   <div id="simple-chord-with-octaves"></div>
   <script type="text/javascript">

jquery.vexflow.js

@@ -30,6 +30,7 @@
     if (!render_options) { render_options = {}; }
     if (!render_options.width) { render_options.width = $(element).attr("data-width") || $(element).attr("width") || 600; }
     if (!render_options.height) { render_options.height = $(element).attr("data-height") || $(element).attr("height") || 110; }
+    if (!render_options.scale) { render_options.scale = parseFloat($(element).attr("data-scale") || "1"); }
     if (!render_options.clef && $(element).attr("data-clef")) { render_options.clef = $(element).attr("data-clef").split(","); }
 
     var canvas_element = $("<canvas width='" + render_options.width + "' height='" + render_options.height + "'></canvas>");