From e209846ac144282a9b4d7b4d78d6a36b0ad88bc9 Mon Sep 17 00:00:00 2001
From: Mark Salsbery <msalsbery@hotmail.com>
Date: Fri, 1 Nov 2013 10:19:47 -0700
Subject: [PATCH] Use canvas whenever possible (#191)

Drawer uses an HTML5 canvas element if it's available.

Viewer.useCanvas can be used to override (default is true).
---
 changelog.txt        |  1 +
 src/drawer.js        |  9 +++++----
 src/openseadragon.js | 14 ++++++++++++++
 3 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/changelog.txt b/changelog.txt
index 8e30cacb..c1615913 100644
--- a/changelog.txt
+++ b/changelog.txt
@@ -35,6 +35,7 @@ OPENSEADRAGON CHANGELOG
     * Button: 'enter', 'exit', 'press', 'release', 'focus', 'blur', 'click'
 * Fixed: IE 10 not reading DZI file correctly in certain circumstances (#218)
 * Fix for non-canvas tile rendering at large size (#264)
+* Drawer now uses an HTML5 canvas element if it's available. Can be overridden with Viewer.useCanvas option (#191)
 
 0.9.131:
 
diff --git a/src/drawer.js b/src/drawer.js
index 0cc436d6..91771e5a 100644
--- a/src/drawer.js
+++ b/src/drawer.js
@@ -46,10 +46,7 @@ var DEVICE_SCREEN       = $.getWindowSize(),
         ( BROWSER == $.BROWSERS.IE     && BROWSER_VERSION >= 9 )
     ),
 
-    USE_CANVAS = SUBPIXEL_RENDERING &&
-        !( DEVICE_SCREEN.x <= 400 || DEVICE_SCREEN.y <= 400 ) &&
-        !( navigator.appVersion.match( 'Mobile' ) ) &&
-        $.isFunction( document.createElement( "canvas" ).getContext );
+    USE_CANVAS = $.supportsCanvas;
 
 //console.error( 'USE_CANVAS ' + USE_CANVAS );
 
@@ -124,6 +121,10 @@ $.Drawer = function( options ) {
 
     }, options );
 
+    if ( this.viewer ) {
+        USE_CANVAS = $.supportsCanvas && this.viewer.useCanvas;
+    }
+
     this.container  = $.getElement( this.element );
     this.canvas     = $.makeNeutralElement( USE_CANVAS ? "canvas" : "div" );
     this.context    = USE_CANVAS ? this.canvas.getContext( "2d" ) : null;
diff --git a/src/openseadragon.js b/src/openseadragon.js
index 0c0a01ca..0edb9b33 100644
--- a/src/openseadragon.js
+++ b/src/openseadragon.js
@@ -386,6 +386,19 @@ 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 ));
 
 /**
@@ -559,6 +572,7 @@ window.OpenSeadragon = window.OpenSeadragon || function( options ){
             imageLoaderLimit:       0,
             maxImageCacheCount:     200,
             timeout:                30000,
+            useCanvas:              true,  // Use canvas element for drawing if available
 
             //INTERFACE RESOURCE SETTINGS
             prefixUrl:              "/images/",