/* Copyright 2012 Mozilla Foundation
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
/* globals ImageData */

'use strict';

(function(root, factory) {
    if (typeof define === 'function' && define.amd) {
        define('pdfjs/display/canvas', ['exports', 'pdfjs/shared/util',
            'pdfjs/display/dom_utils', 'pdfjs/display/pattern_helper',
            'pdfjs/display/webgl'], factory);
    } else if (typeof exports !== 'undefined') {
        factory(exports, require('../shared/util.js'), require('./dom_utils.js'),
            require('./pattern_helper.js'), require('./webgl.js'));
    } else {
        factory((root.pdfjsDisplayCanvas = {}), root.pdfjsSharedUtil,
            root.pdfjsDisplayDOMUtils, root.pdfjsDisplayPatternHelper,
            root.pdfjsDisplayWebGL);
    }
}(this, function(exports, sharedUtil, displayDOMUtils, displayPatternHelper,
                 displayWebGL) {

    var FONT_IDENTITY_MATRIX = sharedUtil.FONT_IDENTITY_MATRIX;
    var IDENTITY_MATRIX = sharedUtil.IDENTITY_MATRIX;
    var ImageKind = sharedUtil.ImageKind;
    var OPS = sharedUtil.OPS;
    var TextRenderingMode = sharedUtil.TextRenderingMode;
    var Uint32ArrayView = sharedUtil.Uint32ArrayView;
    var Util = sharedUtil.Util;
    var assert = sharedUtil.assert;
    var info = sharedUtil.info;
    var isNum = sharedUtil.isNum;
    var isArray = sharedUtil.isArray;
    var isLittleEndian = sharedUtil.isLittleEndian;
    var error = sharedUtil.error;
    var shadow = sharedUtil.shadow;
    var warn = sharedUtil.warn;
    var TilingPattern = displayPatternHelper.TilingPattern;
    var getShadingPatternFromIR = displayPatternHelper.getShadingPatternFromIR;
    var WebGLUtils = displayWebGL.WebGLUtils;
    var hasCanvasTypedArrays = displayDOMUtils.hasCanvasTypedArrays;

// <canvas> contexts store most of the state we need natively.
// However, PDF needs a bit more state, which we store here.

// Minimal font size that would be used during canvas fillText operations.
    var MIN_FONT_SIZE = 16;
// Maximum font size that would be used during canvas fillText operations.
    var MAX_FONT_SIZE = 100;
    var MAX_GROUP_SIZE = 4096;

// Heuristic value used when enforcing minimum line widths.
    var MIN_WIDTH_FACTOR = 0.65;

    var COMPILE_TYPE3_GLYPHS = true;
    var MAX_SIZE_TO_COMPILE = 1000;

    var FULL_CHUNK_HEIGHT = 16;

    var HasCanvasTypedArraysCached = {
        get value() {
            return shadow(HasCanvasTypedArraysCached, 'value', hasCanvasTypedArrays());
        }
    };

    var IsLittleEndianCached = {
        get value() {
            return shadow(IsLittleEndianCached, 'value', isLittleEndian());
        }
    };

    function createScratchCanvas(width, height) {
        var canvas = document.createElement('canvas');
        canvas.width = width;
        canvas.height = height;
        return canvas;
    }

    function addContextCurrentTransform(ctx) {
        // If the context doesn't expose a `mozCurrentTransform`, add a JS based one.
        if (!ctx.mozCurrentTransform) {
            ctx._originalSave = ctx.save;
            ctx._originalRestore = ctx.restore;
            ctx._originalRotate = ctx.rotate;
            ctx._originalScale = ctx.scale;
            ctx._originalTranslate = ctx.translate;
            ctx._originalTransform = ctx.transform;
            ctx._originalSetTransform = ctx.setTransform;

            ctx._transformMatrix = ctx._transformMatrix || [1, 0, 0, 1, 0, 0];
            ctx._transformStack = [];

            Object.defineProperty(ctx, 'mozCurrentTransform', {
                get : function getCurrentTransform() {
                    return this._transformMatrix;
                }
            });

            Object.defineProperty(ctx, 'mozCurrentTransformInverse', {
                get : function getCurrentTransformInverse() {
                    // Calculation done using WolframAlpha:
                    // http://www.wolframalpha.com/input/?
                    //   i=Inverse+{{a%2C+c%2C+e}%2C+{b%2C+d%2C+f}%2C+{0%2C+0%2C+1}}

                    var m = this._transformMatrix;
                    var a = m[0], b = m[1], c = m[2], d = m[3], e = m[4], f = m[5];

                    var ad_bc = a * d - b * c;
                    var bc_ad = b * c - a * d;

                    return [
                        d / ad_bc,
                        b / bc_ad,
                        c / bc_ad,
                        a / ad_bc,
                        (d * e - c * f) / bc_ad,
                        (b * e - a * f) / ad_bc
                    ];
                }
            });

            ctx.save = function ctxSave() {
                var old = this._transformMatrix;
                this._transformStack.push(old);
                this._transformMatrix = old.slice(0, 6);

                this._originalSave();
            };

            ctx.restore = function ctxRestore() {
                var prev = this._transformStack.pop();
                if (prev) {
                    this._transformMatrix = prev;
                    this._originalRestore();
                }
            };

            ctx.translate = function ctxTranslate(x, y) {
                var m = this._transformMatrix;
                m[4] = m[0] * x + m[2] * y + m[4];
                m[5] = m[1] * x + m[3] * y + m[5];

                this._originalTranslate(x, y);
            };

            ctx.scale = function ctxScale(x, y) {
                var m = this._transformMatrix;
                m[0] = m[0] * x;
                m[1] = m[1] * x;
                m[2] = m[2] * y;
                m[3] = m[3] * y;

                this._originalScale(x, y);
            };

            ctx.transform = function ctxTransform(a, b, c, d, e, f) {
                var m = this._transformMatrix;
                this._transformMatrix = [
                    m[0] * a + m[2] * b,
                    m[1] * a + m[3] * b,
                    m[0] * c + m[2] * d,
                    m[1] * c + m[3] * d,
                    m[0] * e + m[2] * f + m[4],
                    m[1] * e + m[3] * f + m[5]
                ];

                ctx._originalTransform(a, b, c, d, e, f);
            };

            ctx.setTransform = function ctxSetTransform(a, b, c, d, e, f) {
                this._transformMatrix = [a, b, c, d, e, f];

                ctx._originalSetTransform(a, b, c, d, e, f);
            };

            ctx.rotate = function ctxRotate(angle) {
                var cosValue = Math.cos(angle);
                var sinValue = Math.sin(angle);

                var m = this._transformMatrix;
                this._transformMatrix = [
                    m[0] * cosValue + m[2] * sinValue,
                    m[1] * cosValue + m[3] * sinValue,
                    m[0] * (-sinValue) + m[2] * cosValue,
                    m[1] * (-sinValue) + m[3] * cosValue,
                    m[4],
                    m[5]
                ];

                this._originalRotate(angle);
            };
        }
    }

    var CachedCanvases = (function CachedCanvasesClosure() {
        function CachedCanvases() {
            this.cache = Object.create(null);
        }

        CachedCanvases.prototype = {
            getCanvas : function CachedCanvases_getCanvas(id, width, height,
                                                          trackTransform) {
                var canvasEntry;
                if (this.cache[id] !== undefined) {
                    canvasEntry = this.cache[id];
                    canvasEntry.canvas.width = width;
                    canvasEntry.canvas.height = height;
                    // reset canvas transform for emulated mozCurrentTransform, if needed
                    canvasEntry.context.setTransform(1, 0, 0, 1, 0, 0);
                } else {
                    var canvas = createScratchCanvas(width, height);
                    var ctx = canvas.getContext('2d');
                    if (trackTransform) {
                        addContextCurrentTransform(ctx);
                    }
                    this.cache[id] = canvasEntry = {canvas : canvas, context : ctx};
                }
                return canvasEntry;
            },
            clear     : function() {
                for (var id in this.cache) {
                    var canvasEntry = this.cache[id];
                    // Zeroing the width and height causes Firefox to release graphics
                    // pdfprotects immediately, which can greatly reduce memory consumption.
                    canvasEntry.canvas.width = 0;
                    canvasEntry.canvas.height = 0;
                    delete this.cache[id];
                }
            }
        };
        return CachedCanvases;
    })();

    function compileType3Glyph(imgData) {
        var POINT_TO_PROCESS_LIMIT = 1000;

        var width = imgData.width, height = imgData.height;
        var i, j, j0, width1 = width + 1;
        var points = new Uint8Array(width1 * (height + 1));
        var POINT_TYPES =
                new Uint8Array([0, 2, 4, 0, 1, 0, 5, 4, 8, 10, 0, 8, 0, 2, 1, 0]);

        // decodes bit-packed mask data
        var lineSize = (width + 7) & ~7, data0 = imgData.data;
        var data = new Uint8Array(lineSize * height), pos = 0, ii;
        for (i = 0, ii = data0.length; i < ii; i++) {
            var mask = 128, elem = data0[i];
            while (mask > 0) {
                data[pos++] = (elem & mask) ? 0 : 255;
                mask >>= 1;
            }
        }

        // finding iteresting points: every point is located between mask pixels,
        // so there will be points of the (width + 1)x(height + 1) grid. Every point
        // will have flags assigned based on neighboring mask pixels:
        //   4 | 8
        //   --P--
        //   2 | 1
        // We are interested only in points with the flags:
        //   - outside corners: 1, 2, 4, 8;
        //   - inside corners: 7, 11, 13, 14;
        //   - and, intersections: 5, 10.
        var count = 0;
        pos = 0;
        if (data[pos] !== 0) {
            points[0] = 1;
            ++count;
        }
        for (j = 1; j < width; j++) {
            if (data[pos] !== data[pos + 1]) {
                points[j] = data[pos] ? 2 : 1;
                ++count;
            }
            pos++;
        }
        if (data[pos] !== 0) {
            points[j] = 2;
            ++count;
        }
        for (i = 1; i < height; i++) {
            pos = i * lineSize;
            j0 = i * width1;
            if (data[pos - lineSize] !== data[pos]) {
                points[j0] = data[pos] ? 1 : 8;
                ++count;
            }
            // 'sum' is the position of the current pixel configuration in the 'TYPES'
            // array (in order 8-1-2-4, so we can use '>>2' to shift the column).
            var sum = (data[pos] ? 4 : 0) + (data[pos - lineSize] ? 8 : 0);
            for (j = 1; j < width; j++) {
                sum = (sum >> 2) + (data[pos + 1] ? 4 : 0) +
                    (data[pos - lineSize + 1] ? 8 : 0);
                if (POINT_TYPES[sum]) {
                    points[j0 + j] = POINT_TYPES[sum];
                    ++count;
                }
                pos++;
            }
            if (data[pos - lineSize] !== data[pos]) {
                points[j0 + j] = data[pos] ? 2 : 4;
                ++count;
            }

            if (count > POINT_TO_PROCESS_LIMIT) {
                return null;
            }
        }

        pos = lineSize * (height - 1);
        j0 = i * width1;
        if (data[pos] !== 0) {
            points[j0] = 8;
            ++count;
        }
        for (j = 1; j < width; j++) {
            if (data[pos] !== data[pos + 1]) {
                points[j0 + j] = data[pos] ? 4 : 8;
                ++count;
            }
            pos++;
        }
        if (data[pos] !== 0) {
            points[j0 + j] = 4;
            ++count;
        }
        if (count > POINT_TO_PROCESS_LIMIT) {
            return null;
        }

        // building outlines
        var steps = new Int32Array([0, width1, -1, 0, -width1, 0, 0, 0, 1]);
        var outlines = [];
        for (i = 0; count && i <= height; i++) {
            var p = i * width1;
            var end = p + width;
            while (p < end && !points[p]) {
                p++;
            }
            if (p === end) {
                continue;
            }
            var coords = [p % width1, i];

            var type = points[p], p0 = p, pp;
            do {
                var step = steps[type];
                do {
                    p += step;
                } while (!points[p]);

                pp = points[p];
                if (pp !== 5 && pp !== 10) {
                    // set new direction
                    type = pp;
                    // delete mark
                    points[p] = 0;
                } else { // type is 5 or 10, ie, a crossing
                    // set new direction
                    type = pp & ((0x33 * type) >> 4);
                    // set new type for "future hit"
                    points[p] &= (type >> 2 | type << 2);
                }

                coords.push(p % width1);
                coords.push((p / width1) | 0);
                --count;
            } while (p0 !== p);
            outlines.push(coords);
            --i;
        }

        var drawOutline = function(c) {
            c.save();
            // the path shall be painted in [0..1]x[0..1] space
            c.scale(1 / width, -1 / height);
            c.translate(0, -height);
            c.beginPath();
            for (var i = 0, ii = outlines.length; i < ii; i++) {
                var o = outlines[i];
                c.moveTo(o[0], o[1]);
                for (var j = 2, jj = o.length; j < jj; j += 2) {
                    c.lineTo(o[j], o[j + 1]);
                }
            }
            c.fill();
            c.beginPath();
            c.restore();
        };

        return drawOutline;
    }

    var CanvasExtraState = (function CanvasExtraStateClosure() {
        function CanvasExtraState(old) {
            // Are soft masks and alpha values shapes or opacities?
            this.alphaIsShape = false;
            this.fontSize = 0;
            this.fontSizeScale = 1;
            this.textMatrix = IDENTITY_MATRIX;
            this.textMatrixScale = 1;
            this.fontMatrix = FONT_IDENTITY_MATRIX;
            this.leading = 0;
            // Current point (in user coordinates)
            this.x = 0;
            this.y = 0;
            // Start of text line (in text coordinates)
            this.lineX = 0;
            this.lineY = 0;
            // Character and word spacing
            this.charSpacing = 0;
            this.wordSpacing = 0;
            this.textHScale = 1;
            this.textRenderingMode = TextRenderingMode.FILL;
            this.textRise = 0;
            // Default fore and background colors
            this.fillColor = '#000000';
            this.strokeColor = '#000000';
            this.patternFill = false;
            // Note: fill alpha applies to all non-stroking operations
            this.fillAlpha = 1;
            this.strokeAlpha = 1;
            this.lineWidth = 1;
            this.activeSMask = null;
            this.resumeSMaskCtx = null; // nonclonable field (see the save method below)

            this.old = old;
        }

        CanvasExtraState.prototype = {
            clone           : function CanvasExtraState_clone() {
                return Object.create(this);
            },
            setCurrentPoint : function CanvasExtraState_setCurrentPoint(x, y) {
                this.x = x;
                this.y = y;
            }
        };
        return CanvasExtraState;
    })();

    var CanvasGraphics = (function CanvasGraphicsClosure() {
        // Defines the time the executeOperatorList is going to be executing
        // before it stops and shedules a continue of execution.
        var EXECUTION_TIME = 15;
        // Defines the number of steps before checking the execution time
        var EXECUTION_STEPS = 10;

        function CanvasGraphics(canvasCtx, commonObjs, objs, imageLayer) {
            this.ctx = canvasCtx;
            this.current = new CanvasExtraState();
            this.stateStack = [];
            this.pendingClip = null;
            this.pendingEOFill = false;
            this.res = null;
            this.xobjs = null;
            this.commonObjs = commonObjs;
            this.objs = objs;
            this.imageLayer = imageLayer;
            this.groupStack = [];
            this.processingType3 = null;
            // Patterns are painted relative to the initial page/form transform, see pdf
            // spec 8.7.2 NOTE 1.
            this.baseTransform = null;
            this.baseTransformStack = [];
            this.groupLevel = 0;
            this.smaskStack = [];
            this.smaskCounter = 0;
            this.tempSMask = null;
            this.cachedCanvases = new CachedCanvases();
            if (canvasCtx) {
                // NOTE: if mozCurrentTransform is polyfilled, then the current state of
                // the transformation must already be set in canvasCtx._transformMatrix.
                addContextCurrentTransform(canvasCtx);
            }
            this.cachedGetSinglePixelWidth = null;
        }

        function putBinaryImageData(ctx, imgData) {
            if (typeof ImageData !== 'undefined' && imgData instanceof ImageData) {
                ctx.putImageData(imgData, 0, 0);
                return;
            }

            // Put the image data to the canvas in chunks, rather than putting the
            // whole image at once.  This saves JS memory, because the ImageData object
            // is smaller. It also possibly saves C++ memory within the implementation
            // of putImageData(). (E.g. in Firefox we make two short-lived copies of
            // the data passed to putImageData()). |n| shouldn't be too small, however,
            // because too many putImageData() calls will slow things down.
            //
            // Note: as written, if the last chunk is partial, the putImageData() call
            // will (conceptually) put pixels past the bounds of the canvas.  But
            // that's ok; any such pixels are ignored.

            var height = imgData.height, width = imgData.width;
            var partialChunkHeight = height % FULL_CHUNK_HEIGHT;
            var fullChunks = (height - partialChunkHeight) / FULL_CHUNK_HEIGHT;
            var totalChunks = partialChunkHeight === 0 ? fullChunks : fullChunks + 1;

            var chunkImgData = ctx.createImageData(width, FULL_CHUNK_HEIGHT);
            var srcPos = 0, destPos;
            var src = imgData.data;
            var dest = chunkImgData.data;
            var i, j, thisChunkHeight, elemsInThisChunk;

            // There are multiple forms in which the pixel data can be passed, and
            // imgData.kind tells us which one this is.
            if (imgData.kind === ImageKind.GRAYSCALE_1BPP) {
                // Grayscale, 1 bit per pixel (i.e. black-and-white).
                var srcLength = src.byteLength;
                var dest32 = HasCanvasTypedArraysCached.value ?
                    new Uint32Array(dest.buffer) : new Uint32ArrayView(dest);
                var dest32DataLength = dest32.length;
                var fullSrcDiff = (width + 7) >> 3;
                var white = 0xFFFFFFFF;
                var black = (IsLittleEndianCached.value ||
                    !HasCanvasTypedArraysCached.value) ? 0xFF000000 : 0x000000FF;
                for (i = 0; i < totalChunks; i++) {
                    thisChunkHeight =
                        (i < fullChunks) ? FULL_CHUNK_HEIGHT : partialChunkHeight;
                    destPos = 0;
                    for (j = 0; j < thisChunkHeight; j++) {
                        var srcDiff = srcLength - srcPos;
                        var k = 0;
                        var kEnd = (srcDiff > fullSrcDiff) ? width : srcDiff * 8 - 7;
                        var kEndUnrolled = kEnd & ~7;
                        var mask = 0;
                        var srcByte = 0;
                        for (; k < kEndUnrolled; k += 8) {
                            srcByte = src[srcPos++];
                            dest32[destPos++] = (srcByte & 128) ? white : black;
                            dest32[destPos++] = (srcByte & 64) ? white : black;
                            dest32[destPos++] = (srcByte & 32) ? white : black;
                            dest32[destPos++] = (srcByte & 16) ? white : black;
                            dest32[destPos++] = (srcByte & 8) ? white : black;
                            dest32[destPos++] = (srcByte & 4) ? white : black;
                            dest32[destPos++] = (srcByte & 2) ? white : black;
                            dest32[destPos++] = (srcByte & 1) ? white : black;
                        }
                        for (; k < kEnd; k++) {
                            if (mask === 0) {
                                srcByte = src[srcPos++];
                                mask = 128;
                            }

                            dest32[destPos++] = (srcByte & mask) ? white : black;
                            mask >>= 1;
                        }
                    }
                    // We ran out of input. Make all remaining pixels transparent.
                    while (destPos < dest32DataLength) {
                        dest32[destPos++] = 0;
                    }

                    ctx.putImageData(chunkImgData, 0, i * FULL_CHUNK_HEIGHT);
                }
            } else if (imgData.kind === ImageKind.RGBA_32BPP) {
                // RGBA, 32-bits per pixel.

                j = 0;
                elemsInThisChunk = width * FULL_CHUNK_HEIGHT * 4;
                for (i = 0; i < fullChunks; i++) {
                    dest.set(src.subarray(srcPos, srcPos + elemsInThisChunk));
                    srcPos += elemsInThisChunk;

                    ctx.putImageData(chunkImgData, 0, j);
                    j += FULL_CHUNK_HEIGHT;
                }
                if (i < totalChunks) {
                    elemsInThisChunk = width * partialChunkHeight * 4;
                    dest.set(src.subarray(srcPos, srcPos + elemsInThisChunk));
                    ctx.putImageData(chunkImgData, 0, j);
                }

            } else if (imgData.kind === ImageKind.RGB_24BPP) {
                // RGB, 24-bits per pixel.
                thisChunkHeight = FULL_CHUNK_HEIGHT;
                elemsInThisChunk = width * thisChunkHeight;
                for (i = 0; i < totalChunks; i++) {
                    if (i >= fullChunks) {
                        thisChunkHeight = partialChunkHeight;
                        elemsInThisChunk = width * thisChunkHeight;
                    }

                    destPos = 0;
                    for (j = elemsInThisChunk; j--;) {
                        dest[destPos++] = src[srcPos++];
                        dest[destPos++] = src[srcPos++];
                        dest[destPos++] = src[srcPos++];
                        dest[destPos++] = 255;
                    }
                    ctx.putImageData(chunkImgData, 0, i * FULL_CHUNK_HEIGHT);
                }
            } else {
                error('bad image kind: ' + imgData.kind);
            }
        }

        function putBinaryImageMask(ctx, imgData) {
            var height = imgData.height, width = imgData.width;
            var partialChunkHeight = height % FULL_CHUNK_HEIGHT;
            var fullChunks = (height - partialChunkHeight) / FULL_CHUNK_HEIGHT;
            var totalChunks = partialChunkHeight === 0 ? fullChunks : fullChunks + 1;

            var chunkImgData = ctx.createImageData(width, FULL_CHUNK_HEIGHT);
            var srcPos = 0;
            var src = imgData.data;
            var dest = chunkImgData.data;

            for (var i = 0; i < totalChunks; i++) {
                var thisChunkHeight =
                        (i < fullChunks) ? FULL_CHUNK_HEIGHT : partialChunkHeight;

                // Expand the mask so it can be used by the canvas.  Any required
                // inversion has already been handled.
                var destPos = 3; // alpha component offset
                for (var j = 0; j < thisChunkHeight; j++) {
                    var mask = 0;
                    for (var k = 0; k < width; k++) {
                        if (!mask) {
                            var elem = src[srcPos++];
                            mask = 128;
                        }
                        dest[destPos] = (elem & mask) ? 0 : 255;
                        destPos += 4;
                        mask >>= 1;
                    }
                }
                ctx.putImageData(chunkImgData, 0, i * FULL_CHUNK_HEIGHT);
            }
        }

        function copyCtxState(sourceCtx, destCtx) {
            var properties = ['strokeStyle', 'fillStyle', 'fillRule', 'globalAlpha',
                'lineWidth', 'lineCap', 'lineJoin', 'miterLimit',
                'globalCompositeOperation', 'font'];
            for (var i = 0, ii = properties.length; i < ii; i++) {
                var property = properties[i];
                if (sourceCtx[property] !== undefined) {
                    destCtx[property] = sourceCtx[property];
                }
            }
            if (sourceCtx.setLineDash !== undefined) {
                destCtx.setLineDash(sourceCtx.getLineDash());
                destCtx.lineDashOffset = sourceCtx.lineDashOffset;
            } else if (sourceCtx.mozDashOffset !== undefined) {
                destCtx.mozDash = sourceCtx.mozDash;
                destCtx.mozDashOffset = sourceCtx.mozDashOffset;
            }
        }

        function composeSMaskBackdrop(bytes, r0, g0, b0) {
            var length = bytes.length;
            for (var i = 3; i < length; i += 4) {
                var alpha = bytes[i];
                if (alpha === 0) {
                    bytes[i - 3] = r0;
                    bytes[i - 2] = g0;
                    bytes[i - 1] = b0;
                } else if (alpha < 255) {
                    var alpha_ = 255 - alpha;
                    bytes[i - 3] = (bytes[i - 3] * alpha + r0 * alpha_) >> 8;
                    bytes[i - 2] = (bytes[i - 2] * alpha + g0 * alpha_) >> 8;
                    bytes[i - 1] = (bytes[i - 1] * alpha + b0 * alpha_) >> 8;
                }
            }
        }

        function composeSMaskAlpha(maskData, layerData, transferMap) {
            var length = maskData.length;
            var scale = 1 / 255;
            for (var i = 3; i < length; i += 4) {
                var alpha = transferMap ? transferMap[maskData[i]] : maskData[i];
                layerData[i] = (layerData[i] * alpha * scale) | 0;
            }
        }

        function composeSMaskLuminosity(maskData, layerData, transferMap) {
            var length = maskData.length;
            for (var i = 3; i < length; i += 4) {
                var y = (maskData[i - 3] * 77) +  // * 0.3 / 255 * 0x10000
                    (maskData[i - 2] * 152) + // * 0.59 ....
                    (maskData[i - 1] * 28);   // * 0.11 ....
                layerData[i] = transferMap ?
                    (layerData[i] * transferMap[y >> 8]) >> 8 :
                    (layerData[i] * y) >> 16;
            }
        }

        function genericComposeSMask(maskCtx, layerCtx, width, height,
                                     subtype, backdrop, transferMap) {
            var hasBackdrop = !!backdrop;
            var r0 = hasBackdrop ? backdrop[0] : 0;
            var g0 = hasBackdrop ? backdrop[1] : 0;
            var b0 = hasBackdrop ? backdrop[2] : 0;

            var composeFn;
            if (subtype === 'Luminosity') {
                composeFn = composeSMaskLuminosity;
            } else {
                composeFn = composeSMaskAlpha;
            }

            // processing image in chunks to save memory
            var PIXELS_TO_PROCESS = 1048576;
            var chunkSize = Math.min(height, Math.ceil(PIXELS_TO_PROCESS / width));
            for (var row = 0; row < height; row += chunkSize) {
                var chunkHeight = Math.min(chunkSize, height - row);
                var maskData = maskCtx.getImageData(0, row, width, chunkHeight);
                var layerData = layerCtx.getImageData(0, row, width, chunkHeight);

                if (hasBackdrop) {
                    composeSMaskBackdrop(maskData.data, r0, g0, b0);
                }
                composeFn(maskData.data, layerData.data, transferMap);

                maskCtx.putImageData(layerData, 0, row);
            }
        }

        function composeSMask(ctx, smask, layerCtx) {
            var mask = smask.canvas;
            var maskCtx = smask.context;

            ctx.setTransform(smask.scaleX, 0, 0, smask.scaleY,
                smask.offsetX, smask.offsetY);

            var backdrop = smask.backdrop || null;
            if (!smask.transferMap && WebGLUtils.isEnabled) {
                var composed = WebGLUtils.composeSMask(layerCtx.canvas, mask,
                    {subtype : smask.subtype, backdrop : backdrop});
                ctx.setTransform(1, 0, 0, 1, 0, 0);
                ctx.drawImage(composed, smask.offsetX, smask.offsetY);
                return;
            }
            genericComposeSMask(maskCtx, layerCtx, mask.width, mask.height,
                smask.subtype, backdrop, smask.transferMap);
            ctx.drawImage(mask, 0, 0);
        }

        var LINE_CAP_STYLES = ['butt', 'round', 'square'];
        var LINE_JOIN_STYLES = ['miter', 'round', 'bevel'];
        var NORMAL_CLIP = {};
        var EO_CLIP = {};

        CanvasGraphics.prototype = {

            beginDrawing : function CanvasGraphics_beginDrawing(transform, viewport,
                                                                transparency) {
                // For pdfs that use blend modes we have to clear the canvas else certain
                // blend modes can look wrong since we'd be blending with a white
                // backdrop. The problem with a transparent backdrop though is we then
                // don't get sub pixel anti aliasing on text, creating temporary
                // transparent canvas when we have blend modes.
                var width = this.ctx.canvas.width;
                var height = this.ctx.canvas.height;

                this.ctx.save();
                this.ctx.fillStyle = 'rgb(255, 255, 255)';
                this.ctx.fillRect(0, 0, width, height);
                this.ctx.restore();

                if (transparency) {
                    var transparentCanvas = this.cachedCanvases.getCanvas(
                        'transparent', width, height, true);
                    this.compositeCtx = this.ctx;
                    this.transparentCanvas = transparentCanvas.canvas;
                    this.ctx = transparentCanvas.context;
                    this.ctx.save();
                    // The transform can be applied before rendering, transferring it to
                    // the new canvas.
                    this.ctx.transform.apply(this.ctx,
                        this.compositeCtx.mozCurrentTransform);
                }

                this.ctx.save();
                if (transform) {
                    this.ctx.transform.apply(this.ctx, transform);
                }
                this.ctx.transform.apply(this.ctx, viewport.transform);

                this.baseTransform = this.ctx.mozCurrentTransform.slice();

                if (this.imageLayer) {
                    this.imageLayer.beginLayout();
                }
            },

            executeOperatorList : function CanvasGraphics_executeOperatorList(
                operatorList,
                executionStartIdx, continueCallback,
                stepper) {
                var argsArray = operatorList.argsArray;
                var fnArray = operatorList.fnArray;
                var i = executionStartIdx || 0;
                var argsArrayLen = argsArray.length;

                // Sometimes the OperatorList to execute is empty.
                if (argsArrayLen === i) {
                    return i;
                }

                var chunkOperations = (argsArrayLen - i > EXECUTION_STEPS &&
                    typeof continueCallback === 'function');
                var endTime = chunkOperations ? Date.now() + EXECUTION_TIME : 0;
                var steps = 0;

                var commonObjs = this.commonObjs;
                var objs = this.objs;
                var fnId;

                while (true) {
                    if (stepper !== undefined && i === stepper.nextBreakPoint) {
                        stepper.breakIt(i, continueCallback);
                        return i;
                    }

                    fnId = fnArray[i];

                    if (fnId !== OPS.dependency) {
                        this[fnId].apply(this, argsArray[i]);
                    } else {
                        var deps = argsArray[i];
                        for (var n = 0, nn = deps.length; n < nn; n++) {
                            var depObjId = deps[n];
                            var common = depObjId[0] === 'g' && depObjId[1] === '_';
                            var objsPool = common ? commonObjs : objs;

                            // If the promise isn't resolved yet, add the continueCallback
                            // to the promise and bail out.
                            if (!objsPool.isResolved(depObjId)) {
                                objsPool.get(depObjId, continueCallback);
                                return i;
                            }
                        }
                    }

                    i++;

                    // If the entire operatorList was executed, stop as were done.
                    if (i === argsArrayLen) {
                        return i;
                    }

                    // If the execution took longer then a certain amount of time and
                    // `continueCallback` is specified, interrupt the execution.
                    if (chunkOperations && ++steps > EXECUTION_STEPS) {
                        if (Date.now() > endTime) {
                            continueCallback();
                            return i;
                        }
                        steps = 0;
                    }

                    // If the operatorList isn't executed completely yet OR the execution
                    // time was short enough, do another execution round.
                }
            },

            endDrawing : function CanvasGraphics_endDrawing() {
                // Finishing all opened operations such as SMask group painting.
                if (this.current.activeSMask !== null) {
                    this.endSMaskGroup();
                }

                this.ctx.restore();

                if (this.transparentCanvas) {
                    this.ctx = this.compositeCtx;
                    this.ctx.save();
                    this.ctx.setTransform(1, 0, 0, 1, 0, 0); // Avoid apply transform twice
                    this.ctx.drawImage(this.transparentCanvas, 0, 0);
                    this.ctx.restore();
                    this.transparentCanvas = null;
                }

                this.cachedCanvases.clear();
                WebGLUtils.clear();

                if (this.imageLayer) {
                    this.imageLayer.endLayout();
                }
            },

            // Graphics state
            setLineWidth       : function CanvasGraphics_setLineWidth(width) {
                this.current.lineWidth = width;
                this.ctx.lineWidth = width;
            },
            setLineCap         : function CanvasGraphics_setLineCap(style) {
                this.ctx.lineCap = LINE_CAP_STYLES[style];
            },
            setLineJoin        : function CanvasGraphics_setLineJoin(style) {
                this.ctx.lineJoin = LINE_JOIN_STYLES[style];
            },
            setMiterLimit      : function CanvasGraphics_setMiterLimit(limit) {
                this.ctx.miterLimit = limit;
            },
            setDash            : function CanvasGraphics_setDash(dashArray, dashPhase) {
                var ctx = this.ctx;
                if (ctx.setLineDash !== undefined) {
                    ctx.setLineDash(dashArray);
                    ctx.lineDashOffset = dashPhase;
                } else {
                    ctx.mozDash = dashArray;
                    ctx.mozDashOffset = dashPhase;
                }
            },
            setRenderingIntent : function CanvasGraphics_setRenderingIntent(intent) {
                // Maybe if we one day fully support color spaces this will be important
                // for now we can ignore.
                // TODO set rendering intent?
            },
            setFlatness        : function CanvasGraphics_setFlatness(flatness) {
                // There's no way to control this with canvas, but we can safely ignore.
                // TODO set flatness?
            },
            setGState          : function CanvasGraphics_setGState(states) {
                for (var i = 0, ii = states.length; i < ii; i++) {
                    var state = states[i];
                    var key = state[0];
                    var value = state[1];

                    switch (key) {
                        case 'LW':
                            this.setLineWidth(value);
                            break;
                        case 'LC':
                            this.setLineCap(value);
                            break;
                        case 'LJ':
                            this.setLineJoin(value);
                            break;
                        case 'ML':
                            this.setMiterLimit(value);
                            break;
                        case 'D':
                            this.setDash(value[0], value[1]);
                            break;
                        case 'RI':
                            this.setRenderingIntent(value);
                            break;
                        case 'FL':
                            this.setFlatness(value);
                            break;
                        case 'Font':
                            this.setFont(value[0], value[1]);
                            break;
                        case 'CA':
                            this.current.strokeAlpha = state[1];
                            break;
                        case 'ca':
                            this.current.fillAlpha = state[1];
                            this.ctx.globalAlpha = state[1];
                            break;
                        case 'BM':
                            if (value && value.name && (value.name !== 'Normal')) {
                                var mode = value.name.replace(/([A-Z])/g,
                                    function(c) {
                                        return '-' + c.toLowerCase();
                                    }
                                ).substring(1);
                                this.ctx.globalCompositeOperation = mode;
                                if (this.ctx.globalCompositeOperation !== mode) {
                                    warn('globalCompositeOperation "' + mode +
                                        '" is not supported');
                                }
                            } else {
                                this.ctx.globalCompositeOperation = 'source-over';
                            }
                            break;
                        case 'SMask':
                            if (this.current.activeSMask) {
                                // If SMask is currrenly used, it needs to be suspended or
                                // finished. Suspend only makes sense when at least one save()
                                // was performed and state needs to be reverted on restore().
                                if (this.stateStack.length > 0 &&
                                    (this.stateStack[this.stateStack.length - 1].activeSMask ===
                                        this.current.activeSMask)) {
                                    this.suspendSMaskGroup();
                                } else {
                                    this.endSMaskGroup();
                                }
                            }
                            this.current.activeSMask = value ? this.tempSMask : null;
                            if (this.current.activeSMask) {
                                this.beginSMaskGroup();
                            }
                            this.tempSMask = null;
                            break;
                    }
                }
            },
            beginSMaskGroup    : function CanvasGraphics_beginSMaskGroup() {

                var activeSMask = this.current.activeSMask;
                var drawnWidth = activeSMask.canvas.width;
                var drawnHeight = activeSMask.canvas.height;
                var cacheId = 'smaskGroupAt' + this.groupLevel;
                var scratchCanvas = this.cachedCanvases.getCanvas(
                    cacheId, drawnWidth, drawnHeight, true);

                var currentCtx = this.ctx;
                var currentTransform = currentCtx.mozCurrentTransform;
                this.ctx.save();

                var groupCtx = scratchCanvas.context;
                groupCtx.scale(1 / activeSMask.scaleX, 1 / activeSMask.scaleY);
                groupCtx.translate(-activeSMask.offsetX, -activeSMask.offsetY);
                groupCtx.transform.apply(groupCtx, currentTransform);

                activeSMask.startTransformInverse = groupCtx.mozCurrentTransformInverse;

                copyCtxState(currentCtx, groupCtx);
                this.ctx = groupCtx;
                this.setGState([
                    ['BM', 'Normal'],
                    ['ca', 1],
                    ['CA', 1]
                ]);
                this.groupStack.push(currentCtx);
                this.groupLevel++;
            },
            suspendSMaskGroup  : function CanvasGraphics_endSMaskGroup() {
                // Similar to endSMaskGroup, the intermediate canvas has to be composed
                // and future ctx state restored.
                var groupCtx = this.ctx;
                this.groupLevel--;
                this.ctx = this.groupStack.pop();

                composeSMask(this.ctx, this.current.activeSMask, groupCtx);
                this.ctx.restore();
                this.ctx.save(); // save is needed since SMask will be resumed.
                copyCtxState(groupCtx, this.ctx);

                // Saving state for resuming.
                this.current.resumeSMaskCtx = groupCtx;
                // Transform was changed in the SMask canvas, reflecting this change on
                // this.ctx.
                var deltaTransform = Util.transform(
                    this.current.activeSMask.startTransformInverse,
                    groupCtx.mozCurrentTransform);
                this.ctx.transform.apply(this.ctx, deltaTransform);

                // SMask was composed, the results at the groupCtx can be cleared.
                groupCtx.save();
                groupCtx.setTransform(1, 0, 0, 1, 0, 0);
                groupCtx.clearRect(0, 0, groupCtx.canvas.width, groupCtx.canvas.height);
                groupCtx.restore();
            },
            resumeSMaskGroup   : function CanvasGraphics_endSMaskGroup() {
                // Resuming state saved by suspendSMaskGroup. We don't need to restore
                // any groupCtx state since restore() command (the only caller) will do
                // that for us. See also beginSMaskGroup.
                var groupCtx = this.current.resumeSMaskCtx;
                var currentCtx = this.ctx;
                this.ctx = groupCtx;
                this.groupStack.push(currentCtx);
                this.groupLevel++;
            },
            endSMaskGroup      : function CanvasGraphics_endSMaskGroup() {
                var groupCtx = this.ctx;
                this.groupLevel--;
                this.ctx = this.groupStack.pop();

                composeSMask(this.ctx, this.current.activeSMask, groupCtx);
                this.ctx.restore();
                copyCtxState(groupCtx, this.ctx);
                // Transform was changed in the SMask canvas, reflecting this change on
                // this.ctx.
                var deltaTransform = Util.transform(
                    this.current.activeSMask.startTransformInverse,
                    groupCtx.mozCurrentTransform);
                this.ctx.transform.apply(this.ctx, deltaTransform);
            },
            save               : function CanvasGraphics_save() {
                this.ctx.save();
                var old = this.current;
                this.stateStack.push(old);
                this.current = old.clone();
                this.current.resumeSMaskCtx = null;
            },
            restore            : function CanvasGraphics_restore() {
                // SMask was suspended, we just need to resume it.
                if (this.current.resumeSMaskCtx) {
                    this.resumeSMaskGroup();
                }
                // SMask has to be finished once there is no states that are using the
                // same SMask.
                if (this.current.activeSMask !== null && (this.stateStack.length === 0 ||
                    this.stateStack[this.stateStack.length - 1].activeSMask !==
                    this.current.activeSMask)) {
                    this.endSMaskGroup();
                }

                if (this.stateStack.length !== 0) {
                    this.current = this.stateStack.pop();
                    this.ctx.restore();

                    // Ensure that the clipping path is reset (fixes issue6413.pdf).
                    this.pendingClip = null;

                    this.cachedGetSinglePixelWidth = null;
                }
            },
            transform          : function CanvasGraphics_transform(a, b, c, d, e, f) {
                this.ctx.transform(a, b, c, d, e, f);

                this.cachedGetSinglePixelWidth = null;
            },

            // Path
            constructPath     : function CanvasGraphics_constructPath(ops, args) {
                var ctx = this.ctx;
                var current = this.current;
                var x = current.x, y = current.y;
                for (var i = 0, j = 0, ii = ops.length; i < ii; i++) {
                    switch (ops[i] | 0) {
                        case OPS.rectangle:
                            x = args[j++];
                            y = args[j++];
                            var width = args[j++];
                            var height = args[j++];
                            if (width === 0) {
                                width = this.getSinglePixelWidth();
                            }
                            if (height === 0) {
                                height = this.getSinglePixelWidth();
                            }
                            var xw = x + width;
                            var yh = y + height;
                            this.ctx.moveTo(x, y);
                            this.ctx.lineTo(xw, y);
                            this.ctx.lineTo(xw, yh);
                            this.ctx.lineTo(x, yh);
                            this.ctx.lineTo(x, y);
                            this.ctx.closePath();
                            break;
                        case OPS.moveTo:
                            x = args[j++];
                            y = args[j++];
                            ctx.moveTo(x, y);
                            break;
                        case OPS.lineTo:
                            x = args[j++];
                            y = args[j++];
                            ctx.lineTo(x, y);
                            break;
                        case OPS.curveTo:
                            x = args[j + 4];
                            y = args[j + 5];
                            ctx.bezierCurveTo(args[j], args[j + 1], args[j + 2], args[j + 3],
                                x, y);
                            j += 6;
                            break;
                        case OPS.curveTo2:
                            ctx.bezierCurveTo(x, y, args[j], args[j + 1],
                                args[j + 2], args[j + 3]);
                            x = args[j + 2];
                            y = args[j + 3];
                            j += 4;
                            break;
                        case OPS.curveTo3:
                            x = args[j + 2];
                            y = args[j + 3];
                            ctx.bezierCurveTo(args[j], args[j + 1], x, y, x, y);
                            j += 4;
                            break;
                        case OPS.closePath:
                            ctx.closePath();
                            break;
                    }
                }
                current.setCurrentPoint(x, y);
            },
            closePath         : function CanvasGraphics_closePath() {
                this.ctx.closePath();
            },
            stroke            : function CanvasGraphics_stroke(consumePath) {
                consumePath = typeof consumePath !== 'undefined' ? consumePath : true;
                var ctx = this.ctx;
                var strokeColor = this.current.strokeColor;
                // Prevent drawing too thin lines by enforcing a minimum line width.
                ctx.lineWidth = Math.max(this.getSinglePixelWidth() * MIN_WIDTH_FACTOR,
                    this.current.lineWidth);
                // For stroke we want to temporarily change the global alpha to the
                // stroking alpha.
                ctx.globalAlpha = this.current.strokeAlpha;
                if (strokeColor && strokeColor.hasOwnProperty('type') &&
                    strokeColor.type === 'Pattern') {
                    // for patterns, we transform to pattern space, calculate
                    // the pattern, call stroke, and restore to user space
                    ctx.save();
                    ctx.strokeStyle = strokeColor.getPattern(ctx, this);
                    ctx.stroke();
                    ctx.restore();
                } else {
                    ctx.stroke();
                }
                if (consumePath) {
                    this.consumePath();
                }
                // Restore the global alpha to the fill alpha
                ctx.globalAlpha = this.current.fillAlpha;
            },
            closeStroke       : function CanvasGraphics_closeStroke() {
                this.closePath();
                this.stroke();
            },
            fill              : function CanvasGraphics_fill(consumePath) {
                consumePath = typeof consumePath !== 'undefined' ? consumePath : true;
                var ctx = this.ctx;
                var fillColor = this.current.fillColor;
                var isPatternFill = this.current.patternFill;
                var needRestore = false;

                if (isPatternFill) {
                    ctx.save();
                    if (this.baseTransform) {
                        ctx.setTransform.apply(ctx, this.baseTransform);
                    }
                    ctx.fillStyle = fillColor.getPattern(ctx, this);
                    needRestore = true;
                }

                if (this.pendingEOFill) {
                    if (ctx.mozFillRule !== undefined) {
                        ctx.mozFillRule = 'evenodd';
                        ctx.fill();
                        ctx.mozFillRule = 'nonzero';
                    } else {
                        ctx.fill('evenodd');
                    }
                    this.pendingEOFill = false;
                } else {
                    ctx.fill();
                }

                if (needRestore) {
                    ctx.restore();
                }
                if (consumePath) {
                    this.consumePath();
                }
            },
            eoFill            : function CanvasGraphics_eoFill() {
                this.pendingEOFill = true;
                this.fill();
            },
            fillStroke        : function CanvasGraphics_fillStroke() {
                this.fill(false);
                this.stroke(false);

                this.consumePath();
            },
            eoFillStroke      : function CanvasGraphics_eoFillStroke() {
                this.pendingEOFill = true;
                this.fillStroke();
            },
            closeFillStroke   : function CanvasGraphics_closeFillStroke() {
                this.closePath();
                this.fillStroke();
            },
            closeEOFillStroke : function CanvasGraphics_closeEOFillStroke() {
                this.pendingEOFill = true;
                this.closePath();
                this.fillStroke();
            },
            endPath           : function CanvasGraphics_endPath() {
                this.consumePath();
            },

            // Clipping
            clip   : function CanvasGraphics_clip() {
                this.pendingClip = NORMAL_CLIP;
            },
            eoClip : function CanvasGraphics_eoClip() {
                this.pendingClip = EO_CLIP;
            },

            // Text
            beginText            : function CanvasGraphics_beginText() {
                this.current.textMatrix = IDENTITY_MATRIX;
                this.current.textMatrixScale = 1;
                this.current.x = this.current.lineX = 0;
                this.current.y = this.current.lineY = 0;
            },
            endText              : function CanvasGraphics_endText() {
                var paths = this.pendingTextPaths;
                var ctx = this.ctx;
                if (paths === undefined) {
                    ctx.beginPath();
                    return;
                }

                ctx.save();
                ctx.beginPath();
                for (var i = 0; i < paths.length; i++) {
                    var path = paths[i];
                    ctx.setTransform.apply(ctx, path.transform);
                    ctx.translate(path.x, path.y);
                    path.addToPath(ctx, path.fontSize);
                }
                ctx.restore();
                ctx.clip();
                ctx.beginPath();
                delete this.pendingTextPaths;
            },
            setCharSpacing       : function CanvasGraphics_setCharSpacing(spacing) {
                this.current.charSpacing = spacing;
            },
            setWordSpacing       : function CanvasGraphics_setWordSpacing(spacing) {
                this.current.wordSpacing = spacing;
            },
            setHScale            : function CanvasGraphics_setHScale(scale) {
                this.current.textHScale = scale / 100;
            },
            setLeading           : function CanvasGraphics_setLeading(leading) {
                this.current.leading = -leading;
            },
            setFont              : function CanvasGraphics_setFont(fontRefName, size) {
                var fontObj = this.commonObjs.get(fontRefName);
                var current = this.current;

                if (!fontObj) {
                    error('Can\'t find font for ' + fontRefName);
                }

                current.fontMatrix = (fontObj.fontMatrix ?
                    fontObj.fontMatrix : FONT_IDENTITY_MATRIX);

                // A valid matrix needs all main diagonal elements to be non-zero
                // This also ensures we bypass FF bugzilla bug #719844.
                if (current.fontMatrix[0] === 0 ||
                    current.fontMatrix[3] === 0) {
                    warn('Invalid font matrix for font ' + fontRefName);
                }

                // The spec for Tf (setFont) says that 'size' specifies the font 'scale',
                // and in some docs this can be negative (inverted x-y axes).
                if (size < 0) {
                    size = -size;
                    current.fontDirection = -1;
                } else {
                    current.fontDirection = 1;
                }

                this.current.font = fontObj;
                this.current.fontSize = size;

                if (fontObj.isType3Font) {
                    return; // we don't need ctx.font for Type3 fonts
                }

                var name = fontObj.loadedName || 'sans-serif';
                var bold = fontObj.black ? (fontObj.bold ? '900' : 'bold') :
                    (fontObj.bold ? 'bold' : 'normal');

                var italic = fontObj.italic ? 'italic' : 'normal';
                var typeface = '"' + name + '", ' + fontObj.fallbackName;

                // Some font backends cannot handle fonts below certain size.
                // Keeping the font at minimal size and using the fontSizeScale to change
                // the current transformation matrix before the fillText/strokeText.
                // See https://bugzilla.mozilla.org/show_bug.cgi?id=726227
                var browserFontSize = size < MIN_FONT_SIZE ? MIN_FONT_SIZE :
                    size > MAX_FONT_SIZE ? MAX_FONT_SIZE : size;
                this.current.fontSizeScale = size / browserFontSize;

                var rule = italic + ' ' + bold + ' ' + browserFontSize + 'px ' + typeface;
                this.ctx.font = rule;
            },
            setTextRenderingMode : function CanvasGraphics_setTextRenderingMode(mode) {
                this.current.textRenderingMode = mode;
            },
            setTextRise          : function CanvasGraphics_setTextRise(rise) {
                this.current.textRise = rise;
            },
            moveText             : function CanvasGraphics_moveText(x, y) {
                this.current.x = this.current.lineX += x;
                this.current.y = this.current.lineY += y;
            },
            setLeadingMoveText   : function CanvasGraphics_setLeadingMoveText(x, y) {
                this.setLeading(-y);
                this.moveText(x, y);
            },
            setTextMatrix        : function CanvasGraphics_setTextMatrix(a, b, c, d, e, f) {
                this.current.textMatrix = [a, b, c, d, e, f];
                this.current.textMatrixScale = Math.sqrt(a * a + b * b);

                this.current.x = this.current.lineX = 0;
                this.current.y = this.current.lineY = 0;
            },
            nextLine             : function CanvasGraphics_nextLine() {
                this.moveText(0, this.current.leading);
            },

            paintChar : function CanvasGraphics_paintChar(character, x, y) {
                var ctx = this.ctx;
                var current = this.current;
                var font = current.font;
                var textRenderingMode = current.textRenderingMode;
                var fontSize = current.fontSize / current.fontSizeScale;
                var fillStrokeMode = textRenderingMode &
                    TextRenderingMode.FILL_STROKE_MASK;
                var isAddToPathSet = !!(textRenderingMode &
                    TextRenderingMode.ADD_TO_PATH_FLAG);

                var addToPath;
                if (font.disableFontFace || isAddToPathSet) {
                    addToPath = font.getPathGenerator(this.commonObjs, character);
                }

                if (font.disableFontFace) {
                    ctx.save();
                    ctx.translate(x, y);
                    ctx.beginPath();
                    addToPath(ctx, fontSize);
                    if (fillStrokeMode === TextRenderingMode.FILL ||
                        fillStrokeMode === TextRenderingMode.FILL_STROKE) {
                        ctx.fill();
                    }
                    if (fillStrokeMode === TextRenderingMode.STROKE ||
                        fillStrokeMode === TextRenderingMode.FILL_STROKE) {
                        ctx.stroke();
                    }
                    ctx.restore();
                } else {
                    if (fillStrokeMode === TextRenderingMode.FILL ||
                        fillStrokeMode === TextRenderingMode.FILL_STROKE) {
                        ctx.fillText(character, x, y);
                    }
                    if (fillStrokeMode === TextRenderingMode.STROKE ||
                        fillStrokeMode === TextRenderingMode.FILL_STROKE) {
                        ctx.strokeText(character, x, y);
                    }
                }

                if (isAddToPathSet) {
                    var paths = this.pendingTextPaths || (this.pendingTextPaths = []);
                    paths.push({
                        transform : ctx.mozCurrentTransform,
                        x         : x,
                        y         : y,
                        fontSize  : fontSize,
                        addToPath : addToPath
                    });
                }
            },

            get isFontSubpixelAAEnabled() {
                // Checks if anti-aliasing is enabled when scaled text is painted.
                // On Windows GDI scaled fonts looks bad.
                var ctx = document.createElement('canvas').getContext('2d');
                ctx.scale(1.5, 1);
                ctx.fillText('I', 0, 10);
                var data = ctx.getImageData(0, 0, 10, 10).data;
                var enabled = false;
                for (var i = 3; i < data.length; i += 4) {
                    if (data[i] > 0 && data[i] < 255) {
                        enabled = true;
                        break;
                    }
                }
                return shadow(this, 'isFontSubpixelAAEnabled', enabled);
            },

            showText : function CanvasGraphics_showText(glyphs) {
                var current = this.current;
                var font = current.font;
                if (font.isType3Font) {
                    return this.showType3Text(glyphs);
                }

                var fontSize = current.fontSize;
                if (fontSize === 0) {
                    return;
                }

                var ctx = this.ctx;
                var fontSizeScale = current.fontSizeScale;
                var charSpacing = current.charSpacing;
                var wordSpacing = current.wordSpacing;
                var fontDirection = current.fontDirection;
                var textHScale = current.textHScale * fontDirection;
                var glyphsLength = glyphs.length;
                var vertical = font.vertical;
                var spacingDir = vertical ? 1 : -1;
                var defaultVMetrics = font.defaultVMetrics;
                var widthAdvanceScale = fontSize * current.fontMatrix[0];

                var simpleFillText =
                        current.textRenderingMode === TextRenderingMode.FILL &&
                        !font.disableFontFace;

                ctx.save();
                ctx.transform.apply(ctx, current.textMatrix);
                ctx.translate(current.x, current.y + current.textRise);

                if (current.patternFill) {
                    // TODO: Some shading patterns are not applied correctly to text,
                    //       e.g. issues 3988 and 5432, and ShowText-ShadingPattern.pdf.
                    ctx.fillStyle = current.fillColor.getPattern(ctx, this);
                }

                if (fontDirection > 0) {
                    ctx.scale(textHScale, -1);
                } else {
                    ctx.scale(textHScale, 1);
                }

                var lineWidth = current.lineWidth;
                var scale = current.textMatrixScale;
                if (scale === 0 || lineWidth === 0) {
                    var fillStrokeMode = current.textRenderingMode &
                        TextRenderingMode.FILL_STROKE_MASK;
                    if (fillStrokeMode === TextRenderingMode.STROKE ||
                        fillStrokeMode === TextRenderingMode.FILL_STROKE) {
                        this.cachedGetSinglePixelWidth = null;
                        lineWidth = this.getSinglePixelWidth() * MIN_WIDTH_FACTOR;
                    }
                } else {
                    lineWidth /= scale;
                }

                if (fontSizeScale !== 1.0) {
                    ctx.scale(fontSizeScale, fontSizeScale);
                    lineWidth /= fontSizeScale;
                }

                ctx.lineWidth = lineWidth;

                var x = 0, i;
                for (i = 0; i < glyphsLength; ++i) {
                    var glyph = glyphs[i];
                    if (isNum(glyph)) {
                        x += spacingDir * glyph * fontSize / 1000;
                        continue;
                    }

                    var restoreNeeded = false;
                    var spacing = (glyph.isSpace ? wordSpacing : 0) + charSpacing;
                    var character = glyph.fontChar;
                    var accent = glyph.accent;
                    var scaledX, scaledY, scaledAccentX, scaledAccentY;
                    var width = glyph.width;
                    if (vertical) {
                        var vmetric, vx, vy;
                        vmetric = glyph.vmetric || defaultVMetrics;
                        vx = glyph.vmetric ? vmetric[1] : width * 0.5;
                        vx = -vx * widthAdvanceScale;
                        vy = vmetric[2] * widthAdvanceScale;

                        width = vmetric ? -vmetric[0] : width;
                        scaledX = vx / fontSizeScale;
                        scaledY = (x + vy) / fontSizeScale;
                    } else {
                        scaledX = x / fontSizeScale;
                        scaledY = 0;
                    }

                    if (font.remeasure && width > 0) {
                        // Some standard fonts may not have the exact width: rescale per
                        // character if measured width is greater than expected glyph width
                        // and subpixel-aa is enabled, otherwise just center the glyph.
                        var measuredWidth = ctx.measureText(character).width * 1000 /
                            fontSize * fontSizeScale;
                        if (width < measuredWidth && this.isFontSubpixelAAEnabled) {
                            var characterScaleX = width / measuredWidth;
                            restoreNeeded = true;
                            ctx.save();
                            ctx.scale(characterScaleX, 1);
                            scaledX /= characterScaleX;
                        } else if (width !== measuredWidth) {
                            scaledX += (width - measuredWidth) / 2000 *
                                fontSize / fontSizeScale;
                        }
                    }

                    // Only attempt to draw the glyph if it is actually in the embedded font
                    // file or if there isn't a font file so the fallback font is shown.
                    if (glyph.isInFont || font.missingFile) {
                        if (simpleFillText && !accent) {
                            // common case
                            ctx.fillText(character, scaledX, scaledY);
                        } else {
                            this.paintChar(character, scaledX, scaledY);
                            if (accent) {
                                scaledAccentX = scaledX + accent.offset.x / fontSizeScale;
                                scaledAccentY = scaledY - accent.offset.y / fontSizeScale;
                                this.paintChar(accent.fontChar, scaledAccentX, scaledAccentY);
                            }
                        }
                    }

                    var charWidth = width * widthAdvanceScale + spacing * fontDirection;
                    x += charWidth;

                    if (restoreNeeded) {
                        ctx.restore();
                    }
                }
                if (vertical) {
                    current.y -= x * textHScale;
                } else {
                    current.x += x * textHScale;
                }
                ctx.restore();
            },

            showType3Text : function CanvasGraphics_showType3Text(glyphs) {
                // Type3 fonts - each glyph is a "mini-PDF"
                var ctx = this.ctx;
                var current = this.current;
                var font = current.font;
                var fontSize = current.fontSize;
                var fontDirection = current.fontDirection;
                var spacingDir = font.vertical ? 1 : -1;
                var charSpacing = current.charSpacing;
                var wordSpacing = current.wordSpacing;
                var textHScale = current.textHScale * fontDirection;
                var fontMatrix = current.fontMatrix || FONT_IDENTITY_MATRIX;
                var glyphsLength = glyphs.length;
                var isTextInvisible =
                        current.textRenderingMode === TextRenderingMode.INVISIBLE;
                var i, glyph, width, spacingLength;

                if (isTextInvisible || fontSize === 0) {
                    return;
                }
                this.cachedGetSinglePixelWidth = null;

                ctx.save();
                ctx.transform.apply(ctx, current.textMatrix);
                ctx.translate(current.x, current.y);

                ctx.scale(textHScale, fontDirection);

                for (i = 0; i < glyphsLength; ++i) {
                    glyph = glyphs[i];
                    if (isNum(glyph)) {
                        spacingLength = spacingDir * glyph * fontSize / 1000;
                        this.ctx.translate(spacingLength, 0);
                        current.x += spacingLength * textHScale;
                        continue;
                    }

                    var spacing = (glyph.isSpace ? wordSpacing : 0) + charSpacing;
                    var operatorList = font.charProcOperatorList[glyph.operatorListId];
                    if (!operatorList) {
                        warn('Type3 character \"' + glyph.operatorListId +
                            '\" is not available');
                        continue;
                    }
                    this.processingType3 = glyph;
                    this.save();
                    ctx.scale(fontSize, fontSize);
                    ctx.transform.apply(ctx, fontMatrix);
                    this.executeOperatorList(operatorList);
                    this.restore();

                    var transformed = Util.applyTransform([glyph.width, 0], fontMatrix);
                    width = transformed[0] * fontSize + spacing;

                    ctx.translate(width, 0);
                    current.x += width * textHScale;
                }
                ctx.restore();
                this.processingType3 = null;
            },

            // Type3 fonts
            setCharWidth          : function CanvasGraphics_setCharWidth(xWidth, yWidth) {
                // We can safely ignore this since the width should be the same
                // as the width in the Widths array.
            },
            setCharWidthAndBounds : function CanvasGraphics_setCharWidthAndBounds(xWidth,
                                                                                  yWidth,
                                                                                  llx,
                                                                                  lly,
                                                                                  urx,
                                                                                  ury) {
                // TODO According to the spec we're also suppose to ignore any operators
                // that set color or include images while processing this type3 font.
                this.ctx.rect(llx, lly, urx - llx, ury - lly);
                this.clip();
                this.endPath();
            },

            // Color
            getColorN_Pattern : function CanvasGraphics_getColorN_Pattern(IR) {
                var pattern;
                if (IR[0] === 'TilingPattern') {
                    var color = IR[1];
                    var baseTransform = this.baseTransform ||
                        this.ctx.mozCurrentTransform.slice();
                    var self = this;
                    var canvasGraphicsFactory = {
                        createCanvasGraphics : function(ctx) {
                            return new CanvasGraphics(ctx, self.commonObjs, self.objs);
                        }
                    };
                    pattern = new TilingPattern(IR, color, this.ctx, canvasGraphicsFactory,
                        baseTransform);
                } else {
                    pattern = getShadingPatternFromIR(IR);
                }
                return pattern;
            },
            setStrokeColorN   : function CanvasGraphics_setStrokeColorN(/*...*/) {
                this.current.strokeColor = this.getColorN_Pattern(arguments);
            },
            setFillColorN     : function CanvasGraphics_setFillColorN(/*...*/) {
                this.current.fillColor = this.getColorN_Pattern(arguments);
                this.current.patternFill = true;
            },
            setStrokeRGBColor : function CanvasGraphics_setStrokeRGBColor(r, g, b) {
                var color = Util.makeCssRgb(r, g, b);
                this.ctx.strokeStyle = color;
                this.current.strokeColor = color;
            },
            setFillRGBColor   : function CanvasGraphics_setFillRGBColor(r, g, b) {
                var color = Util.makeCssRgb(r, g, b);
                this.ctx.fillStyle = color;
                this.current.fillColor = color;
                this.current.patternFill = false;
            },

            shadingFill : function CanvasGraphics_shadingFill(patternIR) {
                var ctx = this.ctx;

                this.save();
                var pattern = getShadingPatternFromIR(patternIR);
                ctx.fillStyle = pattern.getPattern(ctx, this, true);

                var inv = ctx.mozCurrentTransformInverse;
                if (inv) {
                    var canvas = ctx.canvas;
                    var width = canvas.width;
                    var height = canvas.height;

                    var bl = Util.applyTransform([0, 0], inv);
                    var br = Util.applyTransform([0, height], inv);
                    var ul = Util.applyTransform([width, 0], inv);
                    var ur = Util.applyTransform([width, height], inv);

                    var x0 = Math.min(bl[0], br[0], ul[0], ur[0]);
                    var y0 = Math.min(bl[1], br[1], ul[1], ur[1]);
                    var x1 = Math.max(bl[0], br[0], ul[0], ur[0]);
                    var y1 = Math.max(bl[1], br[1], ul[1], ur[1]);

                    this.ctx.fillRect(x0, y0, x1 - x0, y1 - y0);
                } else {
                    // HACK to draw the gradient onto an infinite rectangle.
                    // PDF gradients are drawn across the entire image while
                    // Canvas only allows gradients to be drawn in a rectangle
                    // The following bug should allow us to remove this.
                    // https://bugzilla.mozilla.org/show_bug.cgi?id=664884

                    this.ctx.fillRect(-1e10, -1e10, 2e10, 2e10);
                }

                this.restore();
            },

            // Images
            beginInlineImage : function CanvasGraphics_beginInlineImage() {
                error('Should not call beginInlineImage');
            },
            beginImageData   : function CanvasGraphics_beginImageData() {
                error('Should not call beginImageData');
            },

            paintFormXObjectBegin : function CanvasGraphics_paintFormXObjectBegin(matrix,
                                                                                  bbox) {
                this.save();
                this.baseTransformStack.push(this.baseTransform);

                if (isArray(matrix) && 6 === matrix.length) {
                    this.transform.apply(this, matrix);
                }

                this.baseTransform = this.ctx.mozCurrentTransform;

                if (isArray(bbox) && 4 === bbox.length) {
                    var width = bbox[2] - bbox[0];
                    var height = bbox[3] - bbox[1];
                    this.ctx.rect(bbox[0], bbox[1], width, height);
                    this.clip();
                    this.endPath();
                }
            },

            paintFormXObjectEnd : function CanvasGraphics_paintFormXObjectEnd() {
                this.restore();
                this.baseTransform = this.baseTransformStack.pop();
            },

            beginGroup : function CanvasGraphics_beginGroup(group) {
                this.save();
                var currentCtx = this.ctx;
                // TODO non-isolated groups - according to Rik at adobe non-isolated
                // group results aren't usually that different and they even have tools
                // that ignore this setting. Notes from Rik on implmenting:
                // - When you encounter an transparency group, create a new canvas with
                // the dimensions of the bbox
                // - copy the content from the previous canvas to the new canvas
                // - draw as usual
                // - remove the backdrop alpha:
                // alphaNew = 1 - (1 - alpha)/(1 - alphaBackdrop) with 'alpha' the alpha
                // value of your transparency group and 'alphaBackdrop' the alpha of the
                // backdrop
                // - remove background color:
                // colorNew = color - alphaNew *colorBackdrop /(1 - alphaNew)
                if (!group.isolated) {
                    info('TODO: Support non-isolated groups.');
                }

                // TODO knockout - supposedly possible with the clever use of compositing
                // modes.
                if (group.knockout) {
                    warn('Knockout groups not supported.');
                }

                var currentTransform = currentCtx.mozCurrentTransform;
                if (group.matrix) {
                    currentCtx.transform.apply(currentCtx, group.matrix);
                }
                assert(group.bbox, 'Bounding box is required.');

                // Based on the current transform figure out how big the bounding box
                // will actually be.
                var bounds = Util.getAxialAlignedBoundingBox(
                    group.bbox,
                    currentCtx.mozCurrentTransform);
                // Clip the bounding box to the current canvas.
                var canvasBounds = [0,
                    0,
                    currentCtx.canvas.width,
                    currentCtx.canvas.height];
                bounds = Util.intersect(bounds, canvasBounds) || [0, 0, 0, 0];
                // Use ceil in case we're between sizes so we don't create canvas that is
                // too small and make the canvas at least 1x1 pixels.
                var offsetX = Math.floor(bounds[0]);
                var offsetY = Math.floor(bounds[1]);
                var drawnWidth = Math.max(Math.ceil(bounds[2]) - offsetX, 1);
                var drawnHeight = Math.max(Math.ceil(bounds[3]) - offsetY, 1);
                var scaleX = 1, scaleY = 1;
                if (drawnWidth > MAX_GROUP_SIZE) {
                    scaleX = drawnWidth / MAX_GROUP_SIZE;
                    drawnWidth = MAX_GROUP_SIZE;
                }
                if (drawnHeight > MAX_GROUP_SIZE) {
                    scaleY = drawnHeight / MAX_GROUP_SIZE;
                    drawnHeight = MAX_GROUP_SIZE;
                }

                var cacheId = 'groupAt' + this.groupLevel;
                if (group.smask) {
                    // Using two cache entries is case if masks are used one after another.
                    cacheId += '_smask_' + ((this.smaskCounter++) % 2);
                }
                var scratchCanvas = this.cachedCanvases.getCanvas(
                    cacheId, drawnWidth, drawnHeight, true);
                var groupCtx = scratchCanvas.context;

                // Since we created a new canvas that is just the size of the bounding box
                // we have to translate the group ctx.
                groupCtx.scale(1 / scaleX, 1 / scaleY);
                groupCtx.translate(-offsetX, -offsetY);
                groupCtx.transform.apply(groupCtx, currentTransform);

                if (group.smask) {
                    // Saving state and cached mask to be used in setGState.
                    this.smaskStack.push({
                        canvas                : scratchCanvas.canvas,
                        context               : groupCtx,
                        offsetX               : offsetX,
                        offsetY               : offsetY,
                        scaleX                : scaleX,
                        scaleY                : scaleY,
                        subtype               : group.smask.subtype,
                        backdrop              : group.smask.backdrop,
                        transferMap           : group.smask.transferMap || null,
                        startTransformInverse : null, // used during suspend operation
                    });
                } else {
                    // Setup the current ctx so when the group is popped we draw it at the
                    // right location.
                    currentCtx.setTransform(1, 0, 0, 1, 0, 0);
                    currentCtx.translate(offsetX, offsetY);
                    currentCtx.scale(scaleX, scaleY);
                }
                // The transparency group inherits all off the current graphics state
                // except the blend mode, soft mask, and alpha constants.
                copyCtxState(currentCtx, groupCtx);
                this.ctx = groupCtx;
                this.setGState([
                    ['BM', 'Normal'],
                    ['ca', 1],
                    ['CA', 1]
                ]);
                this.groupStack.push(currentCtx);
                this.groupLevel++;

                // Reseting mask state, masks will be applied on restore of the group.
                this.current.activeSMask = null;
            },

            endGroup : function CanvasGraphics_endGroup(group) {
                this.groupLevel--;
                var groupCtx = this.ctx;
                this.ctx = this.groupStack.pop();
                // Turn off image smoothing to avoid sub pixel interpolation which can
                // look kind of blurry for some pdfs.
                if (this.ctx.imageSmoothingEnabled !== undefined) {
                    this.ctx.imageSmoothingEnabled = false;
                } else {
                    this.ctx.mozImageSmoothingEnabled = false;
                }
                if (group.smask) {
                    this.tempSMask = this.smaskStack.pop();
                } else {
                    this.ctx.drawImage(groupCtx.canvas, 0, 0);
                }
                this.restore();
            },

            beginAnnotations : function CanvasGraphics_beginAnnotations() {
                this.save();
                this.current = new CanvasExtraState();

                if (this.baseTransform) {
                    this.ctx.setTransform.apply(this.ctx, this.baseTransform);
                }
            },

            endAnnotations : function CanvasGraphics_endAnnotations() {
                this.restore();
            },

            beginAnnotation : function CanvasGraphics_beginAnnotation(rect, transform,
                                                                      matrix) {
                this.save();

                if (isArray(rect) && 4 === rect.length) {
                    var width = rect[2] - rect[0];
                    var height = rect[3] - rect[1];
                    this.ctx.rect(rect[0], rect[1], width, height);
                    this.clip();
                    this.endPath();
                }

                this.transform.apply(this, transform);
                this.transform.apply(this, matrix);
            },

            endAnnotation : function CanvasGraphics_endAnnotation() {
                this.restore();
            },

            paintJpegXObject : function CanvasGraphics_paintJpegXObject(objId, w, h) {
                var domImage = this.objs.get(objId);
                if (!domImage) {
                    warn('Dependent image isn\'t ready yet');
                    return;
                }

                this.save();

                var ctx = this.ctx;
                // scale the image to the unit square
                ctx.scale(1 / w, -1 / h);

                ctx.drawImage(domImage, 0, 0, domImage.width, domImage.height,
                    0, -h, w, h);
                if (this.imageLayer) {
                    var currentTransform = ctx.mozCurrentTransformInverse;
                    var position = this.getCanvasPosition(0, 0);
                    this.imageLayer.appendImage({
                        objId  : objId,
                        left   : position[0],
                        top    : position[1],
                        width  : w / currentTransform[0],
                        height : h / currentTransform[3]
                    });
                }
                this.restore();
            },

            paintImageMaskXObject : function CanvasGraphics_paintImageMaskXObject(img) {
                var ctx = this.ctx;
                var width = img.width, height = img.height;
                var fillColor = this.current.fillColor;
                var isPatternFill = this.current.patternFill;

                var glyph = this.processingType3;

                if (COMPILE_TYPE3_GLYPHS && glyph && glyph.compiled === undefined) {
                    if (width <= MAX_SIZE_TO_COMPILE && height <= MAX_SIZE_TO_COMPILE) {
                        glyph.compiled =
                            compileType3Glyph({data : img.data, width : width, height : height});
                    } else {
                        glyph.compiled = null;
                    }
                }

                if (glyph && glyph.compiled) {
                    glyph.compiled(ctx);
                    return;
                }

                var maskCanvas = this.cachedCanvases.getCanvas('maskCanvas',
                    width, height);
                var maskCtx = maskCanvas.context;
                maskCtx.save();

                putBinaryImageMask(maskCtx, img);

                maskCtx.globalCompositeOperation = 'source-in';

                maskCtx.fillStyle = isPatternFill ?
                    fillColor.getPattern(maskCtx, this) : fillColor;
                maskCtx.fillRect(0, 0, width, height);

                maskCtx.restore();

                this.paintInlineImageXObject(maskCanvas.canvas);
            },

            paintImageMaskXObjectRepeat :
                function CanvasGraphics_paintImageMaskXObjectRepeat(imgData, scaleX,
                                                                    scaleY, positions) {
                    var width = imgData.width;
                    var height = imgData.height;
                    var fillColor = this.current.fillColor;
                    var isPatternFill = this.current.patternFill;

                    var maskCanvas = this.cachedCanvases.getCanvas('maskCanvas',
                        width, height);
                    var maskCtx = maskCanvas.context;
                    maskCtx.save();

                    putBinaryImageMask(maskCtx, imgData);

                    maskCtx.globalCompositeOperation = 'source-in';

                    maskCtx.fillStyle = isPatternFill ?
                        fillColor.getPattern(maskCtx, this) : fillColor;
                    maskCtx.fillRect(0, 0, width, height);

                    maskCtx.restore();

                    var ctx = this.ctx;
                    for (var i = 0, ii = positions.length; i < ii; i += 2) {
                        ctx.save();
                        ctx.transform(scaleX, 0, 0, scaleY, positions[i], positions[i + 1]);
                        ctx.scale(1, -1);
                        ctx.drawImage(maskCanvas.canvas, 0, 0, width, height,
                            0, -1, 1, 1);
                        ctx.restore();
                    }
                },

            paintImageMaskXObjectGroup :
                function CanvasGraphics_paintImageMaskXObjectGroup(images) {
                    var ctx = this.ctx;

                    var fillColor = this.current.fillColor;
                    var isPatternFill = this.current.patternFill;
                    for (var i = 0, ii = images.length; i < ii; i++) {
                        var image = images[i];
                        var width = image.width, height = image.height;

                        var maskCanvas = this.cachedCanvases.getCanvas('maskCanvas',
                            width, height);
                        var maskCtx = maskCanvas.context;
                        maskCtx.save();

                        putBinaryImageMask(maskCtx, image);

                        maskCtx.globalCompositeOperation = 'source-in';

                        maskCtx.fillStyle = isPatternFill ?
                            fillColor.getPattern(maskCtx, this) : fillColor;
                        maskCtx.fillRect(0, 0, width, height);

                        maskCtx.restore();

                        ctx.save();
                        ctx.transform.apply(ctx, image.transform);
                        ctx.scale(1, -1);
                        ctx.drawImage(maskCanvas.canvas, 0, 0, width, height,
                            0, -1, 1, 1);
                        ctx.restore();
                    }
                },

            paintImageXObject : function CanvasGraphics_paintImageXObject(objId) {
                var imgData = this.objs.get(objId);
                if (!imgData) {
                    warn('Dependent image isn\'t ready yet');
                    return;
                }

                this.paintInlineImageXObject(imgData);
            },

            paintImageXObjectRepeat :
                function CanvasGraphics_paintImageXObjectRepeat(objId, scaleX, scaleY,
                                                                positions) {
                    var imgData = this.objs.get(objId);
                    if (!imgData) {
                        warn('Dependent image isn\'t ready yet');
                        return;
                    }

                    var width = imgData.width;
                    var height = imgData.height;
                    var map = [];
                    for (var i = 0, ii = positions.length; i < ii; i += 2) {
                        map.push({
                            transform                : [scaleX, 0, 0, scaleY, positions[i],
                                positions[i + 1]], x : 0, y : 0, w : width, h : height
                        });
                    }
                    this.paintInlineImageXObjectGroup(imgData, map);
                },

            paintInlineImageXObject :
                function CanvasGraphics_paintInlineImageXObject(imgData) {
                    var width = imgData.width;
                    var height = imgData.height;
                    var ctx = this.ctx;

                    this.save();
                    // scale the image to the unit square
                    ctx.scale(1 / width, -1 / height);

                    var currentTransform = ctx.mozCurrentTransformInverse;
                    var a = currentTransform[0], b = currentTransform[1];
                    var widthScale = Math.max(Math.sqrt(a * a + b * b), 1);
                    var c = currentTransform[2], d = currentTransform[3];
                    var heightScale = Math.max(Math.sqrt(c * c + d * d), 1);

                    var imgToPaint, tmpCanvas;
                    // instanceof HTMLElement does not work in jsdom node.js module
                    if (imgData instanceof HTMLElement || !imgData.data) {
                        imgToPaint = imgData;
                    } else {
                        tmpCanvas = this.cachedCanvases.getCanvas('inlineImage',
                            width, height);
                        var tmpCtx = tmpCanvas.context;
                        putBinaryImageData(tmpCtx, imgData);
                        imgToPaint = tmpCanvas.canvas;
                    }

                    var paintWidth = width, paintHeight = height;
                    var tmpCanvasId = 'prescale1';
                    // Vertial or horizontal scaling shall not be more than 2 to not loose the
                    // pixels during drawImage operation, painting on the temporary canvas(es)
                    // that are twice smaller in size
                    while ((widthScale > 2 && paintWidth > 1) ||
                    (heightScale > 2 && paintHeight > 1)) {
                        var newWidth = paintWidth, newHeight = paintHeight;
                        if (widthScale > 2 && paintWidth > 1) {
                            newWidth = Math.ceil(paintWidth / 2);
                            widthScale /= paintWidth / newWidth;
                        }
                        if (heightScale > 2 && paintHeight > 1) {
                            newHeight = Math.ceil(paintHeight / 2);
                            heightScale /= paintHeight / newHeight;
                        }
                        tmpCanvas = this.cachedCanvases.getCanvas(tmpCanvasId,
                            newWidth, newHeight);
                        tmpCtx = tmpCanvas.context;
                        tmpCtx.clearRect(0, 0, newWidth, newHeight);
                        tmpCtx.drawImage(imgToPaint, 0, 0, paintWidth, paintHeight,
                            0, 0, newWidth, newHeight);
                        imgToPaint = tmpCanvas.canvas;
                        paintWidth = newWidth;
                        paintHeight = newHeight;
                        tmpCanvasId = tmpCanvasId === 'prescale1' ? 'prescale2' : 'prescale1';
                    }
                    ctx.drawImage(imgToPaint, 0, 0, paintWidth, paintHeight,
                        0, -height, width, height);

                    if (this.imageLayer) {
                        var position = this.getCanvasPosition(0, -height);
                        this.imageLayer.appendImage({
                            imgData : imgData,
                            left    : position[0],
                            top     : position[1],
                            width   : width / currentTransform[0],
                            height  : height / currentTransform[3]
                        });
                    }
                    this.restore();
                },

            paintInlineImageXObjectGroup :
                function CanvasGraphics_paintInlineImageXObjectGroup(imgData, map) {
                    var ctx = this.ctx;
                    var w = imgData.width;
                    var h = imgData.height;

                    var tmpCanvas = this.cachedCanvases.getCanvas('inlineImage', w, h);
                    var tmpCtx = tmpCanvas.context;
                    putBinaryImageData(tmpCtx, imgData);

                    for (var i = 0, ii = map.length; i < ii; i++) {
                        var entry = map[i];
                        ctx.save();
                        ctx.transform.apply(ctx, entry.transform);
                        ctx.scale(1, -1);
                        ctx.drawImage(tmpCanvas.canvas, entry.x, entry.y, entry.w, entry.h,
                            0, -1, 1, 1);
                        if (this.imageLayer) {
                            var position = this.getCanvasPosition(entry.x, entry.y);
                            this.imageLayer.appendImage({
                                imgData : imgData,
                                left    : position[0],
                                top     : position[1],
                                width   : w,
                                height  : h
                            });
                        }
                        ctx.restore();
                    }
                },

            paintSolidColorImageMask :
                function CanvasGraphics_paintSolidColorImageMask() {
                    this.ctx.fillRect(0, 0, 1, 1);
                },

            paintXObject : function CanvasGraphics_paintXObject() {
                warn('Unsupported \'paintXObject\' command.');
            },

            // Marked content

            markPoint               : function CanvasGraphics_markPoint(tag) {
                // TODO Marked content.
            },
            markPointProps          : function CanvasGraphics_markPointProps(tag, properties) {
                // TODO Marked content.
            },
            beginMarkedContent      : function CanvasGraphics_beginMarkedContent(tag) {
                // TODO Marked content.
            },
            beginMarkedContentProps : function CanvasGraphics_beginMarkedContentProps(
                tag, properties) {
                // TODO Marked content.
            },
            endMarkedContent        : function CanvasGraphics_endMarkedContent() {
                // TODO Marked content.
            },

            // Compatibility

            beginCompat : function CanvasGraphics_beginCompat() {
                // TODO ignore undefined operators (should we do that anyway?)
            },
            endCompat   : function CanvasGraphics_endCompat() {
                // TODO stop ignoring undefined operators
            },

            // Helper functions

            consumePath         : function CanvasGraphics_consumePath() {
                var ctx = this.ctx;
                if (this.pendingClip) {
                    if (this.pendingClip === EO_CLIP) {
                        if (ctx.mozFillRule !== undefined) {
                            ctx.mozFillRule = 'evenodd';
                            ctx.clip();
                            ctx.mozFillRule = 'nonzero';
                        } else {
                            ctx.clip('evenodd');
                        }
                    } else {
                        ctx.clip();
                    }
                    this.pendingClip = null;
                }
                ctx.beginPath();
            },
            getSinglePixelWidth : function CanvasGraphics_getSinglePixelWidth(scale) {
                if (this.cachedGetSinglePixelWidth === null) {
                    var inverse = this.ctx.mozCurrentTransformInverse;
                    // max of the current horizontal and vertical scale
                    this.cachedGetSinglePixelWidth = Math.sqrt(Math.max(
                        (inverse[0] * inverse[0] + inverse[1] * inverse[1]),
                        (inverse[2] * inverse[2] + inverse[3] * inverse[3])));
                }
                return this.cachedGetSinglePixelWidth;
            },
            getCanvasPosition   : function CanvasGraphics_getCanvasPosition(x, y) {
                var transform = this.ctx.mozCurrentTransform;
                return [
                    transform[0] * x + transform[2] * y + transform[4],
                    transform[1] * x + transform[3] * y + transform[5]
                ];
            }
        };

        for (var op in OPS) {
            CanvasGraphics.prototype[OPS[op]] = CanvasGraphics.prototype[op];
        }

        return CanvasGraphics;
    })();

    exports.CanvasGraphics = CanvasGraphics;
    exports.createScratchCanvas = createScratchCanvas;
}));
