Make the render expose its width and height

app/assets/javascripts/player/views/player_view.js.coffee

@@ -20,7 +20,7 @@ class AsciiIo.PlayerView extends Backbone.View
 
   setupClipping: ->
     if @options.containerWidth
-      rendererWidth = @rendererView.$el.outerWidth()
+      rendererWidth = @rendererView.elementWidth()
       min = Math.min(@options.containerWidth, rendererWidth)
       @rightClipWidth = rendererWidth - min
     else

app/assets/javascripts/player/views/renderers/base.js.coffee

@@ -10,6 +10,15 @@ class AsciiIo.Renderer.Base extends Backbone.View
     @clearState()
     requestAnimationFrame @render
 
+  width: ->
+    @cols * @cellWidth
+
+  height: ->
+    @lines * @cellHeight
+
+  elementWidth: ->
+    @$el.outerWidth()
+
   clearState: ->
     @state =
       changes: {}

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

@@ -12,11 +12,8 @@ class AsciiIo.Renderer.Canvas extends AsciiIo.Renderer.Base
     @cursorVisible = true
 
   fixTerminalElementSize: ->
-    width = @cols * @cellWidth
-    height = @lines * @cellHeight
-
-    @$el.attr('width', width)
-    @$el.attr('height', height)
+    @$el.attr('width', @width())
+    @$el.attr('height', @height())
 
     @setFont()
 

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

@@ -18,10 +18,7 @@ class AsciiIo.Renderer.Pre extends AsciiIo.Renderer.Base
       i++
 
   fixTerminalElementSize: ->
-    width = @cols * @cellWidth
-    height = @lines * @cellHeight
-
-    @$el.css(width: width + 'px', height: height + 'px')
+    @$el.css(width: @width() + 'px', height: @height() + 'px')
 
   render: ->
     if @state.dirty