From e209846ac144282a9b4d7b4d78d6a36b0ad88bc9 Mon Sep 17 00:00:00 2001 From: Mark Salsbery Date: Fri, 1 Nov 2013 10:19:47 -0700 Subject: [PATCH 1/4] 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/", From 5d034b9ad20d8b2eee9c1930c46b4277a28c037f Mon Sep 17 00:00:00 2001 From: Mark Salsbery Date: Fri, 1 Nov 2013 10:33:17 -0700 Subject: [PATCH 2/4] changelog.txt update --- changelog.txt | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/changelog.txt b/changelog.txt index c1615913..16ae2c67 100644 --- a/changelog.txt +++ b/changelog.txt @@ -35,7 +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) +* Drawer now uses an HTML5 canvas element whenever it's available. Can be overridden with the Viewer.useCanvas option (#191) 0.9.131: From 085c7f2ecb3be0426b1c96f67f921d3d4028dfc9 Mon Sep 17 00:00:00 2001 From: Mark Salsbery Date: Fri, 1 Nov 2013 13:02:28 -0700 Subject: [PATCH 3/4] 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 | 23 +++++++++-------------- src/openseadragon.js | 30 +++++++++++++++++------------- 2 files changed, 26 insertions(+), 27 deletions(-) diff --git a/src/drawer.js b/src/drawer.js index 91771e5a..696bb193 100644 --- a/src/drawer.js +++ b/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 ) { - USE_CANVAS = $.supportsCanvas && this.viewer.useCanvas; - } - + this.useCanvas = $.supportsCanvas && ( this.viewer ? this.viewer.useCanvas : true ); this.container = $.getElement( this.element ); - this.canvas = $.makeNeutralElement( USE_CANVAS ? "canvas" : "div" ); - this.context = USE_CANVAS ? this.canvas.getContext( "2d" ) : null; + this.canvas = $.makeNeutralElement( this.useCanvas ? "canvas" : "div" ); + 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'; diff --git a/src/openseadragon.js b/src/openseadragon.js index 67cceab5..3e7c7fd4 100644 --- a/src/openseadragon.js +++ b/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 )); /** From 5c4131303a166aaf96b0c63fabc9a69478d99393 Mon Sep 17 00:00:00 2001 From: Mark Salsbery Date: Thu, 7 Nov 2013 11:48:01 -0800 Subject: [PATCH 4/4] Use canvas when available - Fixes Removed redundant useCanvas property from drawer --- src/drawer.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/drawer.js b/src/drawer.js index 696bb193..5a049469 100644 --- a/src/drawer.js +++ b/src/drawer.js @@ -89,7 +89,6 @@ $.Drawer = function( options ) { //internal state properties viewer: null, - useCanvas: $.supportsCanvas, downloading: 0, tilesMatrix: {}, tilesLoaded: [],