diff --git a/changelog.txt b/changelog.txt index 0b52e2b6..17a7b514 100644 --- a/changelog.txt +++ b/changelog.txt @@ -37,6 +37,7 @@ OPENSEADRAGON CHANGELOG * Fixed: IE 10 not reading DZI file correctly in certain circumstances (#218) * Added support for the 'wheel' DOM mousewheel event (#261) * Fix for non-canvas tile rendering at large size (#264) +* Drawer now uses an HTML5 canvas element whenever it's available. Can be overridden with the Viewer.useCanvas option (#191) 0.9.131: diff --git a/src/drawer.js b/src/drawer.js index 0cc436d6..5a049469 100644 --- a/src/drawer.js +++ b/src/drawer.js @@ -44,14 +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 = SUBPIXEL_RENDERING && - !( DEVICE_SCREEN.x <= 400 || DEVICE_SCREEN.y <= 400 ) && - !( navigator.appVersion.match( 'Mobile' ) ) && - $.isFunction( document.createElement( "canvas" ).getContext ); - -//console.error( 'USE_CANVAS ' + USE_CANVAS ); /** * @class @@ -124,9 +118,10 @@ $.Drawer = function( options ) { }, options ); + 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; @@ -405,7 +400,7 @@ $.Drawer.prototype = { }, canRotate: function() { - return USE_CANVAS; + return this.useCanvas; } }; @@ -522,7 +517,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; @@ -1200,7 +1195,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 ) { @@ -1263,7 +1258,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 3d19f727..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 */ @@ -598,6 +615,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/",