Use canvas when available - Fixes

Updated documentation doclet.
Enclosed detection code in a function.
Eliminated the Drawer USE_CANVAS global and replaced it with a
Drawer.useCanvas instance variable.

src/drawer.js

@@ -44,11 +44,8 @@ var DEVICE_SCREEN       = $.getWindowSize(),
         ( BROWSER == $.BROWSERS.SAFARI && BROWSER_VERSION >= 4 ) ||
         ( BROWSER == $.BROWSERS.CHROME && BROWSER_VERSION >= 2 ) ||
         ( BROWSER == $.BROWSERS.IE     && BROWSER_VERSION >= 9 )
-    ),
+    );
 
-    USE_CANVAS = $.supportsCanvas;
-
-//console.error( 'USE_CANVAS ' + USE_CANVAS );
 
 /**
  * @class
@@ -92,6 +89,7 @@ $.Drawer = function( options ) {
 
         //internal state properties
         viewer:         null,
+        useCanvas:      $.supportsCanvas,
         downloading:    0,
         tilesMatrix:    {},
         tilesLoaded:    [],
@@ -121,13 +119,10 @@ $.Drawer = function( options ) {
 
     }, options );
 
-    if ( this.viewer ) {
+    this.useCanvas  = $.supportsCanvas && ( this.viewer ? this.viewer.useCanvas : true );
-        USE_CANVAS = $.supportsCanvas && this.viewer.useCanvas;
-    }
-
     this.container  = $.getElement( this.element );
-    this.canvas     = $.makeNeutralElement( USE_CANVAS ? "canvas" : "div" );
+    this.canvas     = $.makeNeutralElement( this.useCanvas ? "canvas" : "div" );
-    this.context    = USE_CANVAS ? this.canvas.getContext( "2d" ) : null;
+    this.context    = this.useCanvas ? this.canvas.getContext( "2d" ) : null;
     this.normHeight = this.source.dimensions.y / this.source.dimensions.x;
     this.element    = this.container;
 
@@ -406,7 +401,7 @@ $.Drawer.prototype = {
     },
 
     canRotate: function() {
-        return USE_CANVAS;
+        return this.useCanvas;
     }
 };
 
@@ -523,7 +518,7 @@ function updateViewport( drawer ) {
 
     //TODO
     drawer.canvas.innerHTML   = "";
-    if ( USE_CANVAS ) {
+    if ( drawer.useCanvas ) {
         if( drawer.canvas.width  != viewportSize.x ||
             drawer.canvas.height != viewportSize.y ){
             drawer.canvas.width  = viewportSize.x;
@@ -1201,7 +1196,7 @@ function drawTiles( drawer, lastDrawn ){
 
         } else {
 
-            if ( USE_CANVAS ) {
+            if ( drawer.useCanvas ) {
                 // TODO do this in a more performant way
                 // specifically, don't save,rotate,restore every time we draw a tile
                 if( drawer.viewport.degrees !== 0 ) {
@@ -1264,7 +1259,7 @@ function restoreRotationChanges( tile, canvas, context ){
 
 function drawDebugInfo( drawer, tile, count, i ){
 
-    if ( USE_CANVAS ) {
+    if ( drawer.useCanvas ) {
         drawer.context.save();
         drawer.context.lineWidth = 2;
         drawer.context.font = 'small-caps bold 13px ariel';

src/openseadragon.js

@@ -226,6 +226,9 @@
   * @param {Number} [options.maxImageCacheCount=100]
   *     The max number of images we should keep in memory (per drawer).
   *
+  * @param {Boolean} [options.useCanvas=true]
+  *     Set to false to not use an HTML canvas element for image rendering even if canvas is supported.
+  *
   * @param {Number} [options.minPixelRatio=0.5]
   *     The higher the minPixelRatio, the lower the quality of the image that
   *     is considered sufficient to stop rendering a given zoom level.  For
@@ -293,6 +296,12 @@ window.OpenSeadragon = window.OpenSeadragon || function( options ){
     toString    = Object.prototype.toString,
     hasOwn      = Object.prototype.hasOwnProperty;
 
+    // Detects canvas support
+    function isCanvasSupported() {
+        var canvasElement = document.createElement( 'canvas' );
+        return !!( $.isFunction( canvasElement.getContext ) &&
+                   canvasElement.getContext( '2d' ) );
+    }
 
     /**
      * Taken from jQuery 1.6.1
@@ -386,6 +395,14 @@ window.OpenSeadragon = window.OpenSeadragon || function( options ){
     };
 
 
+    /**
+     * True if the browser supports the HTML5 canvas element
+     * @name $.supportsCanvas
+     * @property
+     */
+    $.supportsCanvas = isCanvasSupported();
+
+
     /**
      * Detect event model and create appropriate _addEvent/_removeEvent methods
      */
@@ -424,19 +441,6 @@ window.OpenSeadragon = window.OpenSeadragon || function( options ){
     }
 
 
-    /*
-     * Detect canvas support
-     */
-    var canvasElement = document.createElement( 'canvas' );
-    /**
-     * True if the browser supports the HTML5 canvas element
-     * @name $.supportsCanvas
-     * @property
-     */
-    $.supportsCanvas = !!( $.isFunction( canvasElement.getContext ) &&
-                           canvasElement.getContext( '2d' ) );
-
-
 }( OpenSeadragon ));
 
 /**