src/drawer.js
function(opacity, scale, translate, compositeOperation) {
        var options = opacity;
        if (!$.isPlainObject(options)) {
            options = {
                opacity: opacity,
                scale: scale,
                translate: translate,
                compositeOperation: compositeOperation
            };
        }
        if (!this.useCanvas || !this.sketchCanvas) {
            return;
        }
        opacity = options.opacity;
        compositeOperation = options.compositeOperation;
        var bounds = options.bounds;

        this.context.save();
        this.context.globalAlpha = opacity;
        if (compositeOperation) {
            this.context.globalCompositeOperation = compositeOperation;
        }
        if (bounds) {
            // Internet Explorer, Microsoft Edge, and Safari have problems
            // when you call context.drawImage with negative x or y
            // or x + width or y + height greater than the canvas width or height respectively.
            if (bounds.x < 0) {
                bounds.width += bounds.x;
                bounds.x = 0;
            }
            if (bounds.x + bounds.width > this.canvas.width) {
                bounds.width = this.canvas.width - bounds.x;
            }
            if (bounds.y < 0) {
                bounds.height += bounds.y;
                bounds.y = 0;
            }
            if (bounds.y + bounds.height > this.canvas.height) {
                bounds.height = this.canvas.height - bounds.y;
            }

            this.context.drawImage(
                this.sketchCanvas,
                bounds.x,
                bounds.y,
                bounds.width,
                bounds.height,
                bounds.x,
                bounds.y,
                bounds.width,
                bounds.height
            );
        } else {
            scale = options.scale || 1;
            translate = options.translate;
            var position = translate instanceof $.Point ?
                translate : new $.Point(0, 0);

            var widthExt = 0;
            var heightExt = 0;
            if (translate) {
                var widthDiff = this.sketchCanvas.width - this.canvas.width;
                var heightDiff = this.sketchCanvas.height - this.canvas.height;
                widthExt = Math.round(widthDiff / 2);
                heightExt = Math.round(heightDiff / 2);
            }
            this.context.drawImage(
                this.sketchCanvas,
                position.x - widthExt * scale,
                position.y - heightExt * scale,
                (this.canvas.width + 2 * widthExt) * scale,
                (this.canvas.height + 2 * heightExt) * scale,
                -widthExt,
                -heightExt,
                this.canvas.width + 2 * widthExt,
                this.canvas.height + 2 * heightExt
            );
        }
        this.context.restore();
    }
function(opacity, scale, translate, compositeOperation) {
        var options = opacity;
        if (!$.isPlainObject(options)) {
            options = {
                opacity: opacity,
                scale: scale,
                translate: translate,
                compositeOperation: compositeOperation
            };
        }
        if (!this.useCanvas || !this.sketchCanvas) {
            return;
        }
        opacity = options.opacity;
        compositeOperation = options.compositeOperation;
        var bounds = options.bounds;

        this.context.save();
        this.context.globalAlpha = opacity;
        if (compositeOperation) {
            this.context.globalCompositeOperation = compositeOperation;
        }
        if (bounds) {
            // Internet Explorer, Microsoft Edge, and Safari have problems
            // when you call context.drawImage with negative x or y
            // or x + width or y + height greater than the canvas width or height respectively.
            if (bounds.x < 0) {
                bounds.width += bounds.x;
                bounds.x = 0;
            }
            if (bounds.x + bounds.width > this.canvas.width) {
                bounds.width = this.canvas.width - bounds.x;
            }
            if (bounds.y < 0) {
                bounds.height += bounds.y;
                bounds.y = 0;
            }
            if (bounds.y + bounds.height > this.canvas.height) {
                bounds.height = this.canvas.height - bounds.y;
            }

            this.context.drawImage(
                this.sketchCanvas,
                bounds.x,
                bounds.y,
                bounds.width,
                bounds.height,
                bounds.x,
                bounds.y,
                bounds.width,
                bounds.height
            );
        } else {
            scale = options.scale || 1;
            translate = options.translate;
            var position = translate instanceof $.Point ?
                translate : new $.Point(0, 0);

            var widthExt = 0;
            var heightExt = 0;
            if (translate) {
                var widthDiff = this.sketchCanvas.width - this.canvas.width;
                var heightDiff = this.sketchCanvas.height - this.canvas.height;
                widthExt = Math.round(widthDiff / 2);
                heightExt = Math.round(heightDiff / 2);
            }
            this.context.drawImage(
                this.sketchCanvas,
                position.x - widthExt * scale,
                position.y - heightExt * scale,
                (this.canvas.width + 2 * widthExt) * scale,
                (this.canvas.height + 2 * heightExt) * scale,
                -widthExt,
                -heightExt,
                this.canvas.width + 2 * widthExt,
                this.canvas.height + 2 * heightExt
            );
        }
        this.context.restore();
    }
function ( opacity , scale , translate , compositeOperation ) { var options = opacity ; if ( ! $ . isPlainObject ( options ) ) { options = { opacity : opacity , scale : scale , translate : translate , compositeOperation : compositeOperation } ; } if ( ! this . useCanvas || ! this . sketchCanvas ) { return ; } opacity = options . opacity ; compositeOperation = options . compositeOperation ; var bounds = options . bounds ; this . context . save ( ) ; this . context . globalAlpha = opacity ; if ( compositeOperation ) { this . context . globalCompositeOperation = compositeOperation ; } if ( bounds ) { // Internet Explorer, Microsoft Edge, and Safari have problems // when you call context.drawImage with negative x or y // or x + width or y + height greater than the canvas width or height respectively. if ( bounds . x < 0 ) { bounds . width += bounds . x ; bounds . x = 0 ; } if ( bounds . x + bounds . width > this . canvas . width ) { bounds . width = this . canvas . width - bounds . x ; } if ( bounds . y < 0 ) { bounds . height += bounds . y ; bounds . y = 0 ; } if ( bounds . y + bounds . height > this . canvas . height ) { bounds . height = this . canvas . height - bounds . y ; } this . context . drawImage ( this . sketchCanvas , bounds . x , bounds . y , bounds . width , bounds . height , bounds . x , bounds . y , bounds . width , bounds . height ) ; } else { scale = options . scale || 1 ; translate = options . translate ; var position = translate instanceof $ . Point ? translate : new $ . Point ( 0 , 0 ) ; var widthExt = 0 ; var heightExt = 0 ; if ( translate ) { var widthDiff = this . sketchCanvas . width - this . canvas . width ; var heightDiff = this . sketchCanvas . height - this . canvas . height ; widthExt = Math . round ( widthDiff / 2 ) ; heightExt = Math . round ( heightDiff / 2 ) ; } this . context . drawImage ( this . sketchCanvas , position . x - widthExt * scale , position . y - heightExt * scale , ( this . canvas . width + 2 * widthExt ) * scale , ( this . canvas . height + 2 * heightExt ) * scale , - widthExt , - heightExt , this . canvas . width + 2 * widthExt , this . canvas . height + 2 * heightExt ) ; } this . context . restore ( ) ; }
Blends the sketch canvas in the main canvas.
@param {Object} options The options
@param {Float} options.opacity The opacity of the blending.
@param {Float} [options.scale=1] The scale at which tiles were drawn on
the sketch. Default is 1.
Use scale to draw at a lower scale and then enlarge onto the main canvas.
@param {OpenSeadragon.Point} [options.translate] A translation vector
that was used to draw the tiles
@param {String} [options.compositeOperation] - How the image is
composited onto other images; see compositeOperation in
{@link OpenSeadragon.Options} for possible values.
@param {OpenSeadragon.Rect} [options.bounds] The part of the sketch
canvas to blend in the main canvas. If specified, options.scale and
options.translate get ignored.
Blends the sketch canvas in the main canvas .