diff --git a/light9/web/timeline/drawing.coffee b/light9/web/timeline/drawing.coffee
new file mode 100644
--- /dev/null
+++ b/light9/web/timeline/drawing.coffee
@@ -0,0 +1,35 @@
+
+window.Drawing = {}
+  
+window.Drawing.svgPathFromPoints = (pts) ->
+  out = ''
+  pts.forEach (p) ->
+    p = p.elements if p.elements # for vec2
+    if out.length == 0
+      out = 'M '
+    else
+      out += 'L '
+    out += '' + p[0] + ',' + p[1] + ' '
+    return
+  out
+
+window.Drawing.line = (ctx, p1, p2) ->
+  ctx.moveTo(p1.e(1), p1.e(2))
+  ctx.lineTo(p2.e(1), p2.e(2))
+
+# http://stackoverflow.com/a/4959890
+window.Drawing.roundRect = (ctx, sx,sy,ex,ey,r) ->
+    d2r = Math.PI/180
+    r = ( ( ex - sx ) / 2 ) if ( ex - sx ) - ( 2 * r ) < 0 # ensure that the radius isn't too large for x
+    r = ( ( ey - sy ) / 2 ) if ( ey - sy ) - ( 2 * r ) < 0 # ensure that the radius isn't too large for y
+    ctx.beginPath();
+    ctx.moveTo(sx+r,sy);
+    ctx.lineTo(ex-r,sy);
+    ctx.arc(ex-r,sy+r,r,d2r*270,d2r*360,false);
+    ctx.lineTo(ex,ey-r);
+    ctx.arc(ex-r,ey-r,r,d2r*0,d2r*90,false);
+    ctx.lineTo(sx+r,ey);
+    ctx.arc(sx+r,ey-r,r,d2r*90,d2r*180,false);
+    ctx.lineTo(sx,sy+r);
+    ctx.arc(sx+r,sy+r,r,d2r*180,d2r*270,false);
+    ctx.closePath();
diff --git a/light9/web/timeline/timeline-elements.html b/light9/web/timeline/timeline-elements.html
--- a/light9/web/timeline/timeline-elements.html
+++ b/light9/web/timeline/timeline-elements.html
@@ -304,4 +304,5 @@
 <script src="/lib/async/dist/async.js"></script>
 <script src="/lib/underscore/underscore-min.js"></script>
 <script src="adjustable.js"></script>
+<script src="drawing.js"></script>
 <script src="timeline.js"></script>
diff --git a/light9/web/timeline/timeline.coffee b/light9/web/timeline/timeline.coffee
--- a/light9/web/timeline/timeline.coffee
+++ b/light9/web/timeline/timeline.coffee
@@ -1,6 +1,6 @@
 log = console.log
 RDF = 'http://www.w3.org/1999/02/22-rdf-syntax-ns#'
-
+Drawing = window.Drawing
 ROW_COUNT = 7
 
 # polymer dom-repeat is happy to shuffle children by swapping their
@@ -640,39 +640,6 @@ Polymer
     patch = {delQuads: [{subject: @song, predicate: @graph.Uri(':note'), object: @uri, graph: @song}], addQuads: []}
     @graph.applyAndSendPatch(patch)
 
-svgPathFromPoints = (pts) ->
-  out = ''
-  pts.forEach (p) ->
-    p = p.elements if p.elements # for vec2
-    if out.length == 0
-      out = 'M '
-    else
-      out += 'L '
-    out += '' + p[0] + ',' + p[1] + ' '
-    return
-  out
-
-_line = (ctx, p1, p2) ->
-  ctx.moveTo(p1.e(1), p1.e(2))
-  ctx.lineTo(p2.e(1), p2.e(2))
-
-# http://stackoverflow.com/a/4959890
-_roundRect = (ctx, sx,sy,ex,ey,r) ->
-    d2r = Math.PI/180
-    r = ( ( ex - sx ) / 2 ) if ( ex - sx ) - ( 2 * r ) < 0 # ensure that the radius isn't too large for x
-    r = ( ( ey - sy ) / 2 ) if ( ey - sy ) - ( 2 * r ) < 0 # ensure that the radius isn't too large for y
-    ctx.beginPath();
-    ctx.moveTo(sx+r,sy);
-    ctx.lineTo(ex-r,sy);
-    ctx.arc(ex-r,sy+r,r,d2r*270,d2r*360,false);
-    ctx.lineTo(ex,ey-r);
-    ctx.arc(ex-r,ey-r,r,d2r*0,d2r*90,false);
-    ctx.lineTo(sx+r,ey);
-    ctx.arc(sx+r,ey-r,r,d2r*90,d2r*180,false);
-    ctx.lineTo(sx,sy+r);
-    ctx.arc(sx+r,sy+r,r,d2r*180,d2r*270,false);
-    ctx.closePath();
-
 
 Polymer
   is: 'light9-cursor-canvas'
@@ -718,15 +685,15 @@ Polymer
     @ctx.strokeStyle = '#fff'
     @ctx.lineWidth = 0.5
     @ctx.beginPath()
-    _line(@ctx, $V([0, @mouseY]), $V([@$.canvas.width, @mouseY]))
-    _line(@ctx, $V([@mouseX, 0]), $V([@mouseX, @$.canvas.height]))
+    Drawing.line(@ctx, $V([0, @mouseY]), $V([@$.canvas.width, @mouseY]))
+    Drawing.line(@ctx, $V([@mouseX, 0]), $V([@mouseX, @$.canvas.height]))
     @ctx.stroke()
 
     if @cursorPath
       @ctx.strokeStyle = '#ff0303'
       @ctx.lineWidth = 1.5
       @ctx.beginPath()
-      _line(@ctx, @cursorPath.top0, @cursorPath.top1)
+      Drawing.line(@ctx, @cursorPath.top0, @cursorPath.top1)
       @ctx.stroke()
 
       @ctx.fillStyle = '#9c0303'
@@ -739,7 +706,7 @@ Polymer
       @ctx.strokeStyle = '#ff0303'
       @ctx.lineWidth = 3
       @ctx.beginPath()
-      _line(@ctx, @cursorPath.bot0, @cursorPath.bot1, '#ff0303', '3px')
+      Drawing.line(@ctx, @cursorPath.bot0, @cursorPath.bot1, '#ff0303', '3px')
       @ctx.stroke()
     
 Polymer
@@ -859,7 +826,7 @@ Polymer
     @ctx.strokeStyle = '#aaa'
     @ctx.lineWidth = 2
     @ctx.beginPath()
-    _line(@ctx, ctr, target)
+    Drawing.line(@ctx, ctr, target)
     @ctx.stroke()
     
   _drawAdjuster: (label, x1, y1, x2, y2) ->
@@ -872,7 +839,7 @@ Polymer
     
     @ctx.fillStyle = 'rgba(255, 255, 0, 0.5)'
     @ctx.beginPath()
-    _roundRect(@ctx, x1, y1, x2, y2, radius)
+    Drawing.roundRect(@ctx, x1, y1, x2, y2, radius)
     @ctx.fill()
 
     @ctx.shadowColor = 'rgba(0,0,0,0)'
@@ -881,7 +848,7 @@ Polymer
     @ctx.lineWidth = 2
     @ctx.setLineDash([3, 3])
     @ctx.beginPath()
-    _roundRect(@ctx, x1, y1, x2, y2, radius)
+    Drawing.roundRect(@ctx, x1, y1, x2, y2, radius)
     @ctx.stroke()
     @ctx.setLineDash([])
 
@@ -975,7 +942,7 @@ Polymer
         @selection.selected(sel)
       elem.addEventListener 'mouseleave', =>
         @selection.hover(null)
-    elem.setAttribute('d', svgPathFromPoints(curvePts))
+    elem.setAttribute('d', Drawing.svgPathFromPoints(curvePts))
     @updateNotePathClasses(uri, elem)
 
   updateNotePathClasses: (uri, elem) ->