src/tile.js
function( context, drawingHandler, scale, translate ) {

        var position = this.position.times($.pixelDensityRatio),
            size     = this.size.times($.pixelDensityRatio),
            rendered;

        if (!this.context2D && !this.cacheImageRecord) {
            $.console.warn(
                '[Tile.drawCanvas] attempting to draw tile %s when it\'s not cached',
                this.toString());
            return;
        }

        rendered = this.context2D || this.cacheImageRecord.getRenderedContext();

        if ( !this.loaded || !rendered ){
            $.console.warn(
                "Attempting to draw tile %s when it's not yet loaded.",
                this.toString()
            );

            return;
        }

        context.save();

        context.globalAlpha = this.opacity;

        if (typeof scale === 'number' && scale !== 1) {
            // draw tile at a different scale
            position = position.times(scale);
            size = size.times(scale);
        }

        if (translate instanceof $.Point) {
            // shift tile position slightly
            position = position.plus(translate);
        }

        //if we are supposed to be rendering fully opaque rectangle,
        //ie its done fading or fading is turned off, and if we are drawing
        //an image with an alpha channel, then the only way
        //to avoid seeing the tile underneath is to clear the rectangle
        if (context.globalAlpha === 1 && this._hasTransparencyChannel()) {
            //clearing only the inside of the rectangle occupied
            //by the png prevents edge flikering
            context.clearRect(
                position.x,
                position.y,
                size.x,
                size.y
            );
        }

        // This gives the application a chance to make image manipulation
        // changes as we are rendering the image
        drawingHandler({context: context, tile: this, rendered: rendered});

        var sourceWidth, sourceHeight;
        if (this.sourceBounds) {
            sourceWidth = Math.min(this.sourceBounds.width, rendered.canvas.width);
            sourceHeight = Math.min(this.sourceBounds.height, rendered.canvas.height);
        } else {
            sourceWidth = rendered.canvas.width;
            sourceHeight = rendered.canvas.height;
        }

        context.drawImage(
            rendered.canvas,
            0,
            0,
            sourceWidth,
            sourceHeight,
            position.x,
            position.y,
            size.x,
            size.y
        );

        context.restore();
    }
function( context, drawingHandler, scale, translate ) {

        var position = this.position.times($.pixelDensityRatio),
            size     = this.size.times($.pixelDensityRatio),
            rendered;

        if (!this.context2D && !this.cacheImageRecord) {
            $.console.warn(
                '[Tile.drawCanvas] attempting to draw tile %s when it\'s not cached',
                this.toString());
            return;
        }

        rendered = this.context2D || this.cacheImageRecord.getRenderedContext();

        if ( !this.loaded || !rendered ){
            $.console.warn(
                "Attempting to draw tile %s when it's not yet loaded.",
                this.toString()
            );

            return;
        }

        context.save();

        context.globalAlpha = this.opacity;

        if (typeof scale === 'number' && scale !== 1) {
            // draw tile at a different scale
            position = position.times(scale);
            size = size.times(scale);
        }

        if (translate instanceof $.Point) {
            // shift tile position slightly
            position = position.plus(translate);
        }

        //if we are supposed to be rendering fully opaque rectangle,
        //ie its done fading or fading is turned off, and if we are drawing
        //an image with an alpha channel, then the only way
        //to avoid seeing the tile underneath is to clear the rectangle
        if (context.globalAlpha === 1 && this._hasTransparencyChannel()) {
            //clearing only the inside of the rectangle occupied
            //by the png prevents edge flikering
            context.clearRect(
                position.x,
                position.y,
                size.x,
                size.y
            );
        }

        // This gives the application a chance to make image manipulation
        // changes as we are rendering the image
        drawingHandler({context: context, tile: this, rendered: rendered});

        var sourceWidth, sourceHeight;
        if (this.sourceBounds) {
            sourceWidth = Math.min(this.sourceBounds.width, rendered.canvas.width);
            sourceHeight = Math.min(this.sourceBounds.height, rendered.canvas.height);
        } else {
            sourceWidth = rendered.canvas.width;
            sourceHeight = rendered.canvas.height;
        }

        context.drawImage(
            rendered.canvas,
            0,
            0,
            sourceWidth,
            sourceHeight,
            position.x,
            position.y,
            size.x,
            size.y
        );

        context.restore();
    }
function ( context , drawingHandler , scale , translate ) { var position = this . position . times ( $ . pixelDensityRatio ) , size = this . size . times ( $ . pixelDensityRatio ) , rendered ; if ( ! this . context2D && ! this . cacheImageRecord ) { $ . console . warn ( '[Tile.drawCanvas] attempting to draw tile %s when it\'s not cached' , this . toString ( ) ) ; return ; } rendered = this . context2D || this . cacheImageRecord . getRenderedContext ( ) ; if ( ! this . loaded || ! rendered ) { $ . console . warn ( "Attempting to draw tile %s when it's not yet loaded." , this . toString ( ) ) ; return ; } context . save ( ) ; context . globalAlpha = this . opacity ; if ( typeof scale === 'number' && scale !== 1 ) { // draw tile at a different scale position = position . times ( scale ) ; size = size . times ( scale ) ; } if ( translate instanceof $ . Point ) { // shift tile position slightly position = position . plus ( translate ) ; } //if we are supposed to be rendering fully opaque rectangle, //ie its done fading or fading is turned off, and if we are drawing //an image with an alpha channel, then the only way //to avoid seeing the tile underneath is to clear the rectangle if ( context . globalAlpha === 1 && this . _hasTransparencyChannel ( ) ) { //clearing only the inside of the rectangle occupied //by the png prevents edge flikering context . clearRect ( position . x , position . y , size . x , size . y ) ; } // This gives the application a chance to make image manipulation // changes as we are rendering the image drawingHandler ( { context : context , tile : this , rendered : rendered } ) ; var sourceWidth , sourceHeight ; if ( this . sourceBounds ) { sourceWidth = Math . min ( this . sourceBounds . width , rendered . canvas . width ) ; sourceHeight = Math . min ( this . sourceBounds . height , rendered . canvas . height ) ; } else { sourceWidth = rendered . canvas . width ; sourceHeight = rendered . canvas . height ; } context . drawImage ( rendered . canvas , 0 , 0 , sourceWidth , sourceHeight , position . x , position . y , size . x , size . y ) ; context . restore ( ) ; }
Renders the tile in a canvas-based context.
@function
@param {Canvas} context
@param {Function} drawingHandler - Method for firing the drawing event.
drawingHandler({context, tile, rendered})
where <code>rendered</code> is the context with the pre-drawn image.
@param {Number} [scale=1] - Apply a scale to position and size
@param {OpenSeadragon.Point} [translate] - A translation vector
Renders the tile in a canvas - based context .