Greatly improved cancas renderer

app/assets/javascripts/player/renderers/canvas.js.coffee

@@ -8,21 +8,22 @@ class AsciiIo.Renderer.Canvas extends AsciiIo.Renderer.Base
   initialize: (options) ->
     super(options)
     @ctx = @el.getContext('2d')
-    @cellWidth = 7
-    @cellHeight = 14
 
   afterInsertedToDom: ->
-    width = @cols * @cellWidth
+    sample = $('<span class="font-sample">M</span>')
-    height = @lines * @cellHeight
+    @$el.parent().append(sample)
-    @$el.attr('width', width)
+    @cellWidth = sample.width()
-    @$el.attr('height', height)
+    @cellHeight = sample.height()
+    sample.remove()
+
+    @$el.attr('width', @cols * @cellWidth)
+    @$el.attr('height', @lines * @cellHeight)
+
     @setFont()
 
   setFont: ->
     size = @$el.css('font-size')
-    # console.log size
     family = @$el.css('font-family')
-    # console.log family
     @font = "#{size} #{family}"
     @ctx.font = @font
     @prevFont = @font
@@ -32,18 +33,32 @@ class AsciiIo.Renderer.Canvas extends AsciiIo.Renderer.Base
     left = 0
     width = @cols * @cellWidth
     top = n * @cellHeight
+    cursorText = undefined
+    rendered = 0
 
     for fragment in fragments
       [text, brush] = fragment
 
+      if cursorX isnt undefined and rendered <= cursorX < rendered + text.length
+        cursorText = text[cursorX - rendered]
+
       @setBackgroundAttributes(brush)
       @ctx.fillRect left, top, text.length * @cellWidth, @cellHeight
 
-      # if char != ' '
+      unless text.match(/^\s*$/)
-      @setTextAttributes(brush)
+        @setTextAttributes(brush)
-      @ctx.fillText text, left, top + @cellHeight
+        @ctx.fillText text, left, top + @cellHeight
 
       left += text.length * @cellWidth
+      rendered += text.length
+
+    if cursorX
+      x = cursorX * @cellWidth
+      @ctx.fillStyle = AsciiIo.colors[7]
+      @ctx.fillRect x, top, @cellWidth, @cellHeight
+      if cursorText
+        @ctx.fillStyle = AsciiIo.colors[0]
+        @ctx.fillText cursorText, x, top + @cellHeight
 
   setBackgroundAttributes: (brush) ->
     @ctx.fillStyle = AsciiIo.colors[brush.bgColor()]

app/assets/javascripts/player/renderers/pre.js.coffee

@@ -44,7 +44,6 @@ class AsciiIo.Renderer.Pre extends AsciiIo.Renderer.Base
 
   renderLine: (n, fragments, cursorX) ->
     html = []
-
     rendered = 0
 
     for fragment in fragments

app/assets/stylesheets/player.css.scss

@@ -33,19 +33,19 @@ $color5: #EDC951;
   // margin: 0px 0px 30px 20px;
   position: relative;
 
+  .terminal, .font-sample {
+    font-family: 'Bitstream Vera Sans Mono', 'Courier New', monospace;
+    font-size: 12px;
+    line-height: inherit;
+  }
+
   .terminal {
     overflow: hidden;
     padding: 2px;
     margin: 0px;
     display: block;
-    font-size: 12px;
-    // font-family: Monaco,"Courier New","DejaVu Sans Mono","Bitstream Vera Sans Mono",monospace;
-    font-family: monospace;
-    // font-family: 'Droid Sans Mono', Monospace;
     white-space: pre;
     background-color: black;
-    // line-height: 1.2em;
-    line-height: inherit;
     color: #ccc;
     cursor: pointer;
 
@@ -74,7 +74,6 @@ $color5: #EDC951;
     }
 
     .line {
-      font-size: 12px;
       /* background-color: black;*/
       /* padding: 0;*/
       /* margin: 0;*/