How to use copyCtxState method in wpt

Best JavaScript code snippet using wpt

canvas.js

Source:canvas.js

...462      }463      ctx.putImageData(chunkImgData, 0, i * FULL_CHUNK_HEIGHT);464    }465  }466  function copyCtxState(sourceCtx, destCtx) {467    var properties = ['strokeStyle', 'fillStyle', 'fillRule', 'globalAlpha', 'lineWidth', 'lineCap', 'lineJoin', 'miterLimit', 'globalCompositeOperation', 'font'];468    for (var i = 0, ii = properties.length; i < ii; i++) {469      var property = properties[i];470      if (sourceCtx[property] !== undefined) {471        destCtx[property] = sourceCtx[property];472      }473    }474    if (sourceCtx.setLineDash !== undefined) {475      destCtx.setLineDash(sourceCtx.getLineDash());476      destCtx.lineDashOffset = sourceCtx.lineDashOffset;477    }478  }479  function resetCtxToDefault(ctx) {480    ctx.strokeStyle = '#000000';481    ctx.fillStyle = '#000000';482    ctx.fillRule = 'nonzero';483    ctx.globalAlpha = 1;484    ctx.lineWidth = 1;485    ctx.lineCap = 'butt';486    ctx.lineJoin = 'miter';487    ctx.miterLimit = 10;488    ctx.globalCompositeOperation = 'source-over';489    ctx.font = '10px sans-serif';490    if (ctx.setLineDash !== undefined) {491      ctx.setLineDash([]);492      ctx.lineDashOffset = 0;493    }494  }495  function composeSMaskBackdrop(bytes, r0, g0, b0) {496    var length = bytes.length;497    for (var i = 3; i < length; i += 4) {498      var alpha = bytes[i];499      if (alpha === 0) {500        bytes[i - 3] = r0;501        bytes[i - 2] = g0;502        bytes[i - 1] = b0;503      } else if (alpha < 255) {504        var alpha_ = 255 - alpha;505        bytes[i - 3] = bytes[i - 3] * alpha + r0 * alpha_ >> 8;506        bytes[i - 2] = bytes[i - 2] * alpha + g0 * alpha_ >> 8;507        bytes[i - 1] = bytes[i - 1] * alpha + b0 * alpha_ >> 8;508      }509    }510  }511  function composeSMaskAlpha(maskData, layerData, transferMap) {512    var length = maskData.length;513    var scale = 1 / 255;514    for (var i = 3; i < length; i += 4) {515      var alpha = transferMap ? transferMap[maskData[i]] : maskData[i];516      layerData[i] = layerData[i] * alpha * scale | 0;517    }518  }519  function composeSMaskLuminosity(maskData, layerData, transferMap) {520    var length = maskData.length;521    for (var i = 3; i < length; i += 4) {522      var y = maskData[i - 3] * 77 + maskData[i - 2] * 152 + maskData[i - 1] * 28;523      layerData[i] = transferMap ? layerData[i] * transferMap[y >> 8] >> 8 : layerData[i] * y >> 16;524    }525  }526  function genericComposeSMask(maskCtx, layerCtx, width, height, subtype, backdrop, transferMap) {527    var hasBackdrop = !!backdrop;528    var r0 = hasBackdrop ? backdrop[0] : 0;529    var g0 = hasBackdrop ? backdrop[1] : 0;530    var b0 = hasBackdrop ? backdrop[2] : 0;531    var composeFn;532    if (subtype === 'Luminosity') {533      composeFn = composeSMaskLuminosity;534    } else {535      composeFn = composeSMaskAlpha;536    }537    var PIXELS_TO_PROCESS = 1048576;538    var chunkSize = Math.min(height, Math.ceil(PIXELS_TO_PROCESS / width));539    for (var row = 0; row < height; row += chunkSize) {540      var chunkHeight = Math.min(chunkSize, height - row);541      var maskData = maskCtx.getImageData(0, row, width, chunkHeight);542      var layerData = layerCtx.getImageData(0, row, width, chunkHeight);543      if (hasBackdrop) {544        composeSMaskBackdrop(maskData.data, r0, g0, b0);545      }546      composeFn(maskData.data, layerData.data, transferMap);547      maskCtx.putImageData(layerData, 0, row);548    }549  }550  function composeSMask(ctx, smask, layerCtx) {551    var mask = smask.canvas;552    var maskCtx = smask.context;553    ctx.setTransform(smask.scaleX, 0, 0, smask.scaleY, smask.offsetX, smask.offsetY);554    var backdrop = smask.backdrop || null;555    if (!smask.transferMap && _webgl.WebGLUtils.isEnabled) {556      var composed = _webgl.WebGLUtils.composeSMask(layerCtx.canvas, mask, {557        subtype: smask.subtype,558        backdrop: backdrop559      });560      ctx.setTransform(1, 0, 0, 1, 0, 0);561      ctx.drawImage(composed, smask.offsetX, smask.offsetY);562      return;563    }564    genericComposeSMask(maskCtx, layerCtx, mask.width, mask.height, smask.subtype, backdrop, smask.transferMap);565    ctx.drawImage(mask, 0, 0);566  }567  var LINE_CAP_STYLES = ['butt', 'round', 'square'];568  var LINE_JOIN_STYLES = ['miter', 'round', 'bevel'];569  var NORMAL_CLIP = {};570  var EO_CLIP = {};571  CanvasGraphics.prototype = {572    beginDrawing: function beginDrawing(_ref) {573      var transform = _ref.transform,574          viewport = _ref.viewport,575          transparency = _ref.transparency,576          _ref$background = _ref.background,577          background = _ref$background === undefined ? null : _ref$background;578      var width = this.ctx.canvas.width;579      var height = this.ctx.canvas.height;580      this.ctx.save();581      this.ctx.fillStyle = background || 'rgb(255, 255, 255)';582      this.ctx.fillRect(0, 0, width, height);583      this.ctx.restore();584      if (transparency) {585        var transparentCanvas = this.cachedCanvases.getCanvas('transparent', width, height, true);586        this.compositeCtx = this.ctx;587        this.transparentCanvas = transparentCanvas.canvas;588        this.ctx = transparentCanvas.context;589        this.ctx.save();590        this.ctx.transform.apply(this.ctx, this.compositeCtx.mozCurrentTransform);591      }592      this.ctx.save();593      resetCtxToDefault(this.ctx);594      if (transform) {595        this.ctx.transform.apply(this.ctx, transform);596      }597      this.ctx.transform.apply(this.ctx, viewport.transform);598      this.baseTransform = this.ctx.mozCurrentTransform.slice();599      if (this.imageLayer) {600        this.imageLayer.beginLayout();601      }602    },603    executeOperatorList: function CanvasGraphics_executeOperatorList(operatorList, executionStartIdx, continueCallback, stepper) {604      var argsArray = operatorList.argsArray;605      var fnArray = operatorList.fnArray;606      var i = executionStartIdx || 0;607      var argsArrayLen = argsArray.length;608      if (argsArrayLen === i) {609        return i;610      }611      var chunkOperations = argsArrayLen - i > EXECUTION_STEPS && typeof continueCallback === 'function';612      var endTime = chunkOperations ? Date.now() + EXECUTION_TIME : 0;613      var steps = 0;614      var commonObjs = this.commonObjs;615      var objs = this.objs;616      var fnId;617      while (true) {618        if (stepper !== undefined && i === stepper.nextBreakPoint) {619          stepper.breakIt(i, continueCallback);620          return i;621        }622        fnId = fnArray[i];623        if (fnId !== _util.OPS.dependency) {624          this[fnId].apply(this, argsArray[i]);625        } else {626          var deps = argsArray[i];627          for (var n = 0, nn = deps.length; n < nn; n++) {628            var depObjId = deps[n];629            var common = depObjId[0] === 'g' && depObjId[1] === '_';630            var objsPool = common ? commonObjs : objs;631            if (!objsPool.isResolved(depObjId)) {632              objsPool.get(depObjId, continueCallback);633              return i;634            }635          }636        }637        i++;638        if (i === argsArrayLen) {639          return i;640        }641        if (chunkOperations && ++steps > EXECUTION_STEPS) {642          if (Date.now() > endTime) {643            continueCallback();644            return i;645          }646          steps = 0;647        }648      }649    },650    endDrawing: function CanvasGraphics_endDrawing() {651      if (this.current.activeSMask !== null) {652        this.endSMaskGroup();653      }654      this.ctx.restore();655      if (this.transparentCanvas) {656        this.ctx = this.compositeCtx;657        this.ctx.save();658        this.ctx.setTransform(1, 0, 0, 1, 0, 0);659        this.ctx.drawImage(this.transparentCanvas, 0, 0);660        this.ctx.restore();661        this.transparentCanvas = null;662      }663      this.cachedCanvases.clear();664      _webgl.WebGLUtils.clear();665      if (this.imageLayer) {666        this.imageLayer.endLayout();667      }668    },669    setLineWidth: function CanvasGraphics_setLineWidth(width) {670      this.current.lineWidth = width;671      this.ctx.lineWidth = width;672    },673    setLineCap: function CanvasGraphics_setLineCap(style) {674      this.ctx.lineCap = LINE_CAP_STYLES[style];675    },676    setLineJoin: function CanvasGraphics_setLineJoin(style) {677      this.ctx.lineJoin = LINE_JOIN_STYLES[style];678    },679    setMiterLimit: function CanvasGraphics_setMiterLimit(limit) {680      this.ctx.miterLimit = limit;681    },682    setDash: function CanvasGraphics_setDash(dashArray, dashPhase) {683      var ctx = this.ctx;684      if (ctx.setLineDash !== undefined) {685        ctx.setLineDash(dashArray);686        ctx.lineDashOffset = dashPhase;687      }688    },689    setRenderingIntent: function CanvasGraphics_setRenderingIntent(intent) {},690    setFlatness: function CanvasGraphics_setFlatness(flatness) {},691    setGState: function CanvasGraphics_setGState(states) {692      for (var i = 0, ii = states.length; i < ii; i++) {693        var state = states[i];694        var key = state[0];695        var value = state[1];696        switch (key) {697          case 'LW':698            this.setLineWidth(value);699            break;700          case 'LC':701            this.setLineCap(value);702            break;703          case 'LJ':704            this.setLineJoin(value);705            break;706          case 'ML':707            this.setMiterLimit(value);708            break;709          case 'D':710            this.setDash(value[0], value[1]);711            break;712          case 'RI':713            this.setRenderingIntent(value);714            break;715          case 'FL':716            this.setFlatness(value);717            break;718          case 'Font':719            this.setFont(value[0], value[1]);720            break;721          case 'CA':722            this.current.strokeAlpha = state[1];723            break;724          case 'ca':725            this.current.fillAlpha = state[1];726            this.ctx.globalAlpha = state[1];727            break;728          case 'BM':729            this.ctx.globalCompositeOperation = value;730            break;731          case 'SMask':732            if (this.current.activeSMask) {733              if (this.stateStack.length > 0 && this.stateStack[this.stateStack.length - 1].activeSMask === this.current.activeSMask) {734                this.suspendSMaskGroup();735              } else {736                this.endSMaskGroup();737              }738            }739            this.current.activeSMask = value ? this.tempSMask : null;740            if (this.current.activeSMask) {741              this.beginSMaskGroup();742            }743            this.tempSMask = null;744            break;745        }746      }747    },748    beginSMaskGroup: function CanvasGraphics_beginSMaskGroup() {749      var activeSMask = this.current.activeSMask;750      var drawnWidth = activeSMask.canvas.width;751      var drawnHeight = activeSMask.canvas.height;752      var cacheId = 'smaskGroupAt' + this.groupLevel;753      var scratchCanvas = this.cachedCanvases.getCanvas(cacheId, drawnWidth, drawnHeight, true);754      var currentCtx = this.ctx;755      var currentTransform = currentCtx.mozCurrentTransform;756      this.ctx.save();757      var groupCtx = scratchCanvas.context;758      groupCtx.scale(1 / activeSMask.scaleX, 1 / activeSMask.scaleY);759      groupCtx.translate(-activeSMask.offsetX, -activeSMask.offsetY);760      groupCtx.transform.apply(groupCtx, currentTransform);761      activeSMask.startTransformInverse = groupCtx.mozCurrentTransformInverse;762      copyCtxState(currentCtx, groupCtx);763      this.ctx = groupCtx;764      this.setGState([['BM', 'source-over'], ['ca', 1], ['CA', 1]]);765      this.groupStack.push(currentCtx);766      this.groupLevel++;767    },768    suspendSMaskGroup: function CanvasGraphics_endSMaskGroup() {769      var groupCtx = this.ctx;770      this.groupLevel--;771      this.ctx = this.groupStack.pop();772      composeSMask(this.ctx, this.current.activeSMask, groupCtx);773      this.ctx.restore();774      this.ctx.save();775      copyCtxState(groupCtx, this.ctx);776      this.current.resumeSMaskCtx = groupCtx;777      var deltaTransform = _util.Util.transform(this.current.activeSMask.startTransformInverse, groupCtx.mozCurrentTransform);778      this.ctx.transform.apply(this.ctx, deltaTransform);779      groupCtx.save();780      groupCtx.setTransform(1, 0, 0, 1, 0, 0);781      groupCtx.clearRect(0, 0, groupCtx.canvas.width, groupCtx.canvas.height);782      groupCtx.restore();783    },784    resumeSMaskGroup: function CanvasGraphics_endSMaskGroup() {785      var groupCtx = this.current.resumeSMaskCtx;786      var currentCtx = this.ctx;787      this.ctx = groupCtx;788      this.groupStack.push(currentCtx);789      this.groupLevel++;790    },791    endSMaskGroup: function CanvasGraphics_endSMaskGroup() {792      var groupCtx = this.ctx;793      this.groupLevel--;794      this.ctx = this.groupStack.pop();795      composeSMask(this.ctx, this.current.activeSMask, groupCtx);796      this.ctx.restore();797      copyCtxState(groupCtx, this.ctx);798      var deltaTransform = _util.Util.transform(this.current.activeSMask.startTransformInverse, groupCtx.mozCurrentTransform);799      this.ctx.transform.apply(this.ctx, deltaTransform);800    },801    save: function CanvasGraphics_save() {802      this.ctx.save();803      var old = this.current;804      this.stateStack.push(old);805      this.current = old.clone();806      this.current.resumeSMaskCtx = null;807    },808    restore: function CanvasGraphics_restore() {809      if (this.current.resumeSMaskCtx) {810        this.resumeSMaskGroup();811      }812      if (this.current.activeSMask !== null && (this.stateStack.length === 0 || this.stateStack[this.stateStack.length - 1].activeSMask !== this.current.activeSMask)) {813        this.endSMaskGroup();814      }815      if (this.stateStack.length !== 0) {816        this.current = this.stateStack.pop();817        this.ctx.restore();818        this.pendingClip = null;819        this.cachedGetSinglePixelWidth = null;820      }821    },822    transform: function CanvasGraphics_transform(a, b, c, d, e, f) {823      this.ctx.transform(a, b, c, d, e, f);824      this.cachedGetSinglePixelWidth = null;825    },826    constructPath: function CanvasGraphics_constructPath(ops, args) {827      var ctx = this.ctx;828      var current = this.current;829      var x = current.x,830          y = current.y;831      for (var i = 0, j = 0, ii = ops.length; i < ii; i++) {832        switch (ops[i] | 0) {833          case _util.OPS.rectangle:834            x = args[j++];835            y = args[j++];836            var width = args[j++];837            var height = args[j++];838            if (width === 0) {839              width = this.getSinglePixelWidth();840            }841            if (height === 0) {842              height = this.getSinglePixelWidth();843            }844            var xw = x + width;845            var yh = y + height;846            this.ctx.moveTo(x, y);847            this.ctx.lineTo(xw, y);848            this.ctx.lineTo(xw, yh);849            this.ctx.lineTo(x, yh);850            this.ctx.lineTo(x, y);851            this.ctx.closePath();852            break;853          case _util.OPS.moveTo:854            x = args[j++];855            y = args[j++];856            ctx.moveTo(x, y);857            break;858          case _util.OPS.lineTo:859            x = args[j++];860            y = args[j++];861            ctx.lineTo(x, y);862            break;863          case _util.OPS.curveTo:864            x = args[j + 4];865            y = args[j + 5];866            ctx.bezierCurveTo(args[j], args[j + 1], args[j + 2], args[j + 3], x, y);867            j += 6;868            break;869          case _util.OPS.curveTo2:870            ctx.bezierCurveTo(x, y, args[j], args[j + 1], args[j + 2], args[j + 3]);871            x = args[j + 2];872            y = args[j + 3];873            j += 4;874            break;875          case _util.OPS.curveTo3:876            x = args[j + 2];877            y = args[j + 3];878            ctx.bezierCurveTo(args[j], args[j + 1], x, y, x, y);879            j += 4;880            break;881          case _util.OPS.closePath:882            ctx.closePath();883            break;884        }885      }886      current.setCurrentPoint(x, y);887    },888    closePath: function CanvasGraphics_closePath() {889      this.ctx.closePath();890    },891    stroke: function CanvasGraphics_stroke(consumePath) {892      consumePath = typeof consumePath !== 'undefined' ? consumePath : true;893      var ctx = this.ctx;894      var strokeColor = this.current.strokeColor;895      ctx.lineWidth = Math.max(this.getSinglePixelWidth() * MIN_WIDTH_FACTOR, this.current.lineWidth);896      ctx.globalAlpha = this.current.strokeAlpha;897      if (strokeColor && strokeColor.hasOwnProperty('type') && strokeColor.type === 'Pattern') {898        ctx.save();899        ctx.strokeStyle = strokeColor.getPattern(ctx, this);900        ctx.stroke();901        ctx.restore();902      } else {903        ctx.stroke();904      }905      if (consumePath) {906        this.consumePath();907      }908      ctx.globalAlpha = this.current.fillAlpha;909    },910    closeStroke: function CanvasGraphics_closeStroke() {911      this.closePath();912      this.stroke();913    },914    fill: function CanvasGraphics_fill(consumePath) {915      consumePath = typeof consumePath !== 'undefined' ? consumePath : true;916      var ctx = this.ctx;917      var fillColor = this.current.fillColor;918      var isPatternFill = this.current.patternFill;919      var needRestore = false;920      if (isPatternFill) {921        ctx.save();922        if (this.baseTransform) {923          ctx.setTransform.apply(ctx, this.baseTransform);924        }925        ctx.fillStyle = fillColor.getPattern(ctx, this);926        needRestore = true;927      }928      if (this.pendingEOFill) {929        ctx.fill('evenodd');930        this.pendingEOFill = false;931      } else {932        ctx.fill();933      }934      if (needRestore) {935        ctx.restore();936      }937      if (consumePath) {938        this.consumePath();939      }940    },941    eoFill: function CanvasGraphics_eoFill() {942      this.pendingEOFill = true;943      this.fill();944    },945    fillStroke: function CanvasGraphics_fillStroke() {946      this.fill(false);947      this.stroke(false);948      this.consumePath();949    },950    eoFillStroke: function CanvasGraphics_eoFillStroke() {951      this.pendingEOFill = true;952      this.fillStroke();953    },954    closeFillStroke: function CanvasGraphics_closeFillStroke() {955      this.closePath();956      this.fillStroke();957    },958    closeEOFillStroke: function CanvasGraphics_closeEOFillStroke() {959      this.pendingEOFill = true;960      this.closePath();961      this.fillStroke();962    },963    endPath: function CanvasGraphics_endPath() {964      this.consumePath();965    },966    clip: function CanvasGraphics_clip() {967      this.pendingClip = NORMAL_CLIP;968    },969    eoClip: function CanvasGraphics_eoClip() {970      this.pendingClip = EO_CLIP;971    },972    beginText: function CanvasGraphics_beginText() {973      this.current.textMatrix = _util.IDENTITY_MATRIX;974      this.current.textMatrixScale = 1;975      this.current.x = this.current.lineX = 0;976      this.current.y = this.current.lineY = 0;977    },978    endText: function CanvasGraphics_endText() {979      var paths = this.pendingTextPaths;980      var ctx = this.ctx;981      if (paths === undefined) {982        ctx.beginPath();983        return;984      }985      ctx.save();986      ctx.beginPath();987      for (var i = 0; i < paths.length; i++) {988        var path = paths[i];989        ctx.setTransform.apply(ctx, path.transform);990        ctx.translate(path.x, path.y);991        path.addToPath(ctx, path.fontSize);992      }993      ctx.restore();994      ctx.clip();995      ctx.beginPath();996      delete this.pendingTextPaths;997    },998    setCharSpacing: function CanvasGraphics_setCharSpacing(spacing) {999      this.current.charSpacing = spacing;1000    },1001    setWordSpacing: function CanvasGraphics_setWordSpacing(spacing) {1002      this.current.wordSpacing = spacing;1003    },1004    setHScale: function CanvasGraphics_setHScale(scale) {1005      this.current.textHScale = scale / 100;1006    },1007    setLeading: function CanvasGraphics_setLeading(leading) {1008      this.current.leading = -leading;1009    },1010    setFont: function CanvasGraphics_setFont(fontRefName, size) {1011      var fontObj = this.commonObjs.get(fontRefName);1012      var current = this.current;1013      if (!fontObj) {1014        throw new Error('Can\'t find font for ' + fontRefName);1015      }1016      current.fontMatrix = fontObj.fontMatrix ? fontObj.fontMatrix : _util.FONT_IDENTITY_MATRIX;1017      if (current.fontMatrix[0] === 0 || current.fontMatrix[3] === 0) {1018        (0, _util.warn)('Invalid font matrix for font ' + fontRefName);1019      }1020      if (size < 0) {1021        size = -size;1022        current.fontDirection = -1;1023      } else {1024        current.fontDirection = 1;1025      }1026      this.current.font = fontObj;1027      this.current.fontSize = size;1028      if (fontObj.isType3Font) {1029        return;1030      }1031      var name = fontObj.loadedName || 'sans-serif';1032      var bold = fontObj.black ? '900' : fontObj.bold ? 'bold' : 'normal';1033      var italic = fontObj.italic ? 'italic' : 'normal';1034      var typeface = '"' + name + '", ' + fontObj.fallbackName;1035      var browserFontSize = size < MIN_FONT_SIZE ? MIN_FONT_SIZE : size > MAX_FONT_SIZE ? MAX_FONT_SIZE : size;1036      this.current.fontSizeScale = size / browserFontSize;1037      var rule = italic + ' ' + bold + ' ' + browserFontSize + 'px ' + typeface;1038      this.ctx.font = rule;1039    },1040    setTextRenderingMode: function CanvasGraphics_setTextRenderingMode(mode) {1041      this.current.textRenderingMode = mode;1042    },1043    setTextRise: function CanvasGraphics_setTextRise(rise) {1044      this.current.textRise = rise;1045    },1046    moveText: function CanvasGraphics_moveText(x, y) {1047      this.current.x = this.current.lineX += x;1048      this.current.y = this.current.lineY += y;1049    },1050    setLeadingMoveText: function CanvasGraphics_setLeadingMoveText(x, y) {1051      this.setLeading(-y);1052      this.moveText(x, y);1053    },1054    setTextMatrix: function CanvasGraphics_setTextMatrix(a, b, c, d, e, f) {1055      this.current.textMatrix = [a, b, c, d, e, f];1056      this.current.textMatrixScale = Math.sqrt(a * a + b * b);1057      this.current.x = this.current.lineX = 0;1058      this.current.y = this.current.lineY = 0;1059    },1060    nextLine: function CanvasGraphics_nextLine() {1061      this.moveText(0, this.current.leading);1062    },1063    paintChar: function CanvasGraphics_paintChar(character, x, y) {1064      var ctx = this.ctx;1065      var current = this.current;1066      var font = current.font;1067      var textRenderingMode = current.textRenderingMode;1068      var fontSize = current.fontSize / current.fontSizeScale;1069      var fillStrokeMode = textRenderingMode & _util.TextRenderingMode.FILL_STROKE_MASK;1070      var isAddToPathSet = !!(textRenderingMode & _util.TextRenderingMode.ADD_TO_PATH_FLAG);1071      var addToPath;1072      if (font.disableFontFace || isAddToPathSet) {1073        addToPath = font.getPathGenerator(this.commonObjs, character);1074      }1075      if (font.disableFontFace) {1076        ctx.save();1077        ctx.translate(x, y);1078        ctx.beginPath();1079        addToPath(ctx, fontSize);1080        if (fillStrokeMode === _util.TextRenderingMode.FILL || fillStrokeMode === _util.TextRenderingMode.FILL_STROKE) {1081          ctx.fill();1082        }1083        if (fillStrokeMode === _util.TextRenderingMode.STROKE || fillStrokeMode === _util.TextRenderingMode.FILL_STROKE) {1084          ctx.stroke();1085        }1086        ctx.restore();1087      } else {1088        if (fillStrokeMode === _util.TextRenderingMode.FILL || fillStrokeMode === _util.TextRenderingMode.FILL_STROKE) {1089          ctx.fillText(character, x, y);1090        }1091        if (fillStrokeMode === _util.TextRenderingMode.STROKE || fillStrokeMode === _util.TextRenderingMode.FILL_STROKE) {1092          ctx.strokeText(character, x, y);1093        }1094      }1095      if (isAddToPathSet) {1096        var paths = this.pendingTextPaths || (this.pendingTextPaths = []);1097        paths.push({1098          transform: ctx.mozCurrentTransform,1099          x: x,1100          y: y,1101          fontSize: fontSize,1102          addToPath: addToPath1103        });1104      }1105    },1106    get isFontSubpixelAAEnabled() {1107      var ctx = this.canvasFactory.create(10, 10).context;1108      ctx.scale(1.5, 1);1109      ctx.fillText('I', 0, 10);1110      var data = ctx.getImageData(0, 0, 10, 10).data;1111      var enabled = false;1112      for (var i = 3; i < data.length; i += 4) {1113        if (data[i] > 0 && data[i] < 255) {1114          enabled = true;1115          break;1116        }1117      }1118      return (0, _util.shadow)(this, 'isFontSubpixelAAEnabled', enabled);1119    },1120    showText: function CanvasGraphics_showText(glyphs) {1121      var current = this.current;1122      var font = current.font;1123      if (font.isType3Font) {1124        return this.showType3Text(glyphs);1125      }1126      var fontSize = current.fontSize;1127      if (fontSize === 0) {1128        return;1129      }1130      var ctx = this.ctx;1131      var fontSizeScale = current.fontSizeScale;1132      var charSpacing = current.charSpacing;1133      var wordSpacing = current.wordSpacing;1134      var fontDirection = current.fontDirection;1135      var textHScale = current.textHScale * fontDirection;1136      var glyphsLength = glyphs.length;1137      var vertical = font.vertical;1138      var spacingDir = vertical ? 1 : -1;1139      var defaultVMetrics = font.defaultVMetrics;1140      var widthAdvanceScale = fontSize * current.fontMatrix[0];1141      var simpleFillText = current.textRenderingMode === _util.TextRenderingMode.FILL && !font.disableFontFace;1142      ctx.save();1143      ctx.transform.apply(ctx, current.textMatrix);1144      ctx.translate(current.x, current.y + current.textRise);1145      if (current.patternFill) {1146        ctx.fillStyle = current.fillColor.getPattern(ctx, this);1147      }1148      if (fontDirection > 0) {1149        ctx.scale(textHScale, -1);1150      } else {1151        ctx.scale(textHScale, 1);1152      }1153      var lineWidth = current.lineWidth;1154      var scale = current.textMatrixScale;1155      if (scale === 0 || lineWidth === 0) {1156        var fillStrokeMode = current.textRenderingMode & _util.TextRenderingMode.FILL_STROKE_MASK;1157        if (fillStrokeMode === _util.TextRenderingMode.STROKE || fillStrokeMode === _util.TextRenderingMode.FILL_STROKE) {1158          this.cachedGetSinglePixelWidth = null;1159          lineWidth = this.getSinglePixelWidth() * MIN_WIDTH_FACTOR;1160        }1161      } else {1162        lineWidth /= scale;1163      }1164      if (fontSizeScale !== 1.0) {1165        ctx.scale(fontSizeScale, fontSizeScale);1166        lineWidth /= fontSizeScale;1167      }1168      ctx.lineWidth = lineWidth;1169      var x = 0,1170          i;1171      for (i = 0; i < glyphsLength; ++i) {1172        var glyph = glyphs[i];1173        if ((0, _util.isNum)(glyph)) {1174          x += spacingDir * glyph * fontSize / 1000;1175          continue;1176        }1177        var restoreNeeded = false;1178        var spacing = (glyph.isSpace ? wordSpacing : 0) + charSpacing;1179        var character = glyph.fontChar;1180        var accent = glyph.accent;1181        var scaledX, scaledY, scaledAccentX, scaledAccentY;1182        var width = glyph.width;1183        if (vertical) {1184          var vmetric, vx, vy;1185          vmetric = glyph.vmetric || defaultVMetrics;1186          vx = glyph.vmetric ? vmetric[1] : width * 0.5;1187          vx = -vx * widthAdvanceScale;1188          vy = vmetric[2] * widthAdvanceScale;1189          width = vmetric ? -vmetric[0] : width;1190          scaledX = vx / fontSizeScale;1191          scaledY = (x + vy) / fontSizeScale;1192        } else {1193          scaledX = x / fontSizeScale;1194          scaledY = 0;1195        }1196        if (font.remeasure && width > 0) {1197          var measuredWidth = ctx.measureText(character).width * 1000 / fontSize * fontSizeScale;1198          if (width < measuredWidth && this.isFontSubpixelAAEnabled) {1199            var characterScaleX = width / measuredWidth;1200            restoreNeeded = true;1201            ctx.save();1202            ctx.scale(characterScaleX, 1);1203            scaledX /= characterScaleX;1204          } else if (width !== measuredWidth) {1205            scaledX += (width - measuredWidth) / 2000 * fontSize / fontSizeScale;1206          }1207        }1208        if (glyph.isInFont || font.missingFile) {1209          if (simpleFillText && !accent) {1210            ctx.fillText(character, scaledX, scaledY);1211          } else {1212            this.paintChar(character, scaledX, scaledY);1213            if (accent) {1214              scaledAccentX = scaledX + accent.offset.x / fontSizeScale;1215              scaledAccentY = scaledY - accent.offset.y / fontSizeScale;1216              this.paintChar(accent.fontChar, scaledAccentX, scaledAccentY);1217            }1218          }1219        }1220        var charWidth = width * widthAdvanceScale + spacing * fontDirection;1221        x += charWidth;1222        if (restoreNeeded) {1223          ctx.restore();1224        }1225      }1226      if (vertical) {1227        current.y -= x * textHScale;1228      } else {1229        current.x += x * textHScale;1230      }1231      ctx.restore();1232    },1233    showType3Text: function CanvasGraphics_showType3Text(glyphs) {1234      var ctx = this.ctx;1235      var current = this.current;1236      var font = current.font;1237      var fontSize = current.fontSize;1238      var fontDirection = current.fontDirection;1239      var spacingDir = font.vertical ? 1 : -1;1240      var charSpacing = current.charSpacing;1241      var wordSpacing = current.wordSpacing;1242      var textHScale = current.textHScale * fontDirection;1243      var fontMatrix = current.fontMatrix || _util.FONT_IDENTITY_MATRIX;1244      var glyphsLength = glyphs.length;1245      var isTextInvisible = current.textRenderingMode === _util.TextRenderingMode.INVISIBLE;1246      var i, glyph, width, spacingLength;1247      if (isTextInvisible || fontSize === 0) {1248        return;1249      }1250      this.cachedGetSinglePixelWidth = null;1251      ctx.save();1252      ctx.transform.apply(ctx, current.textMatrix);1253      ctx.translate(current.x, current.y);1254      ctx.scale(textHScale, fontDirection);1255      for (i = 0; i < glyphsLength; ++i) {1256        glyph = glyphs[i];1257        if ((0, _util.isNum)(glyph)) {1258          spacingLength = spacingDir * glyph * fontSize / 1000;1259          this.ctx.translate(spacingLength, 0);1260          current.x += spacingLength * textHScale;1261          continue;1262        }1263        var spacing = (glyph.isSpace ? wordSpacing : 0) + charSpacing;1264        var operatorList = font.charProcOperatorList[glyph.operatorListId];1265        if (!operatorList) {1266          (0, _util.warn)('Type3 character "' + glyph.operatorListId + '" is not available.');1267          continue;1268        }1269        this.processingType3 = glyph;1270        this.save();1271        ctx.scale(fontSize, fontSize);1272        ctx.transform.apply(ctx, fontMatrix);1273        this.executeOperatorList(operatorList);1274        this.restore();1275        var transformed = _util.Util.applyTransform([glyph.width, 0], fontMatrix);1276        width = transformed[0] * fontSize + spacing;1277        ctx.translate(width, 0);1278        current.x += width * textHScale;1279      }1280      ctx.restore();1281      this.processingType3 = null;1282    },1283    setCharWidth: function CanvasGraphics_setCharWidth(xWidth, yWidth) {},1284    setCharWidthAndBounds: function CanvasGraphics_setCharWidthAndBounds(xWidth, yWidth, llx, lly, urx, ury) {1285      this.ctx.rect(llx, lly, urx - llx, ury - lly);1286      this.clip();1287      this.endPath();1288    },1289    getColorN_Pattern: function CanvasGraphics_getColorN_Pattern(IR) {1290      var _this = this;1291      var pattern;1292      if (IR[0] === 'TilingPattern') {1293        var color = IR[1];1294        var baseTransform = this.baseTransform || this.ctx.mozCurrentTransform.slice();1295        var canvasGraphicsFactory = {1296          createCanvasGraphics: function createCanvasGraphics(ctx) {1297            return new CanvasGraphics(ctx, _this.commonObjs, _this.objs, _this.canvasFactory);1298          }1299        };1300        pattern = new _pattern_helper.TilingPattern(IR, color, this.ctx, canvasGraphicsFactory, baseTransform);1301      } else {1302        pattern = (0, _pattern_helper.getShadingPatternFromIR)(IR);1303      }1304      return pattern;1305    },1306    setStrokeColorN: function CanvasGraphics_setStrokeColorN() {1307      this.current.strokeColor = this.getColorN_Pattern(arguments);1308    },1309    setFillColorN: function CanvasGraphics_setFillColorN() {1310      this.current.fillColor = this.getColorN_Pattern(arguments);1311      this.current.patternFill = true;1312    },1313    setStrokeRGBColor: function CanvasGraphics_setStrokeRGBColor(r, g, b) {1314      var color = _util.Util.makeCssRgb(r, g, b);1315      this.ctx.strokeStyle = color;1316      this.current.strokeColor = color;1317    },1318    setFillRGBColor: function CanvasGraphics_setFillRGBColor(r, g, b) {1319      var color = _util.Util.makeCssRgb(r, g, b);1320      this.ctx.fillStyle = color;1321      this.current.fillColor = color;1322      this.current.patternFill = false;1323    },1324    shadingFill: function CanvasGraphics_shadingFill(patternIR) {1325      var ctx = this.ctx;1326      this.save();1327      var pattern = (0, _pattern_helper.getShadingPatternFromIR)(patternIR);1328      ctx.fillStyle = pattern.getPattern(ctx, this, true);1329      var inv = ctx.mozCurrentTransformInverse;1330      if (inv) {1331        var canvas = ctx.canvas;1332        var width = canvas.width;1333        var height = canvas.height;1334        var bl = _util.Util.applyTransform([0, 0], inv);1335        var br = _util.Util.applyTransform([0, height], inv);1336        var ul = _util.Util.applyTransform([width, 0], inv);1337        var ur = _util.Util.applyTransform([width, height], inv);1338        var x0 = Math.min(bl[0], br[0], ul[0], ur[0]);1339        var y0 = Math.min(bl[1], br[1], ul[1], ur[1]);1340        var x1 = Math.max(bl[0], br[0], ul[0], ur[0]);1341        var y1 = Math.max(bl[1], br[1], ul[1], ur[1]);1342        this.ctx.fillRect(x0, y0, x1 - x0, y1 - y0);1343      } else {1344        this.ctx.fillRect(-1e10, -1e10, 2e10, 2e10);1345      }1346      this.restore();1347    },1348    beginInlineImage: function CanvasGraphics_beginInlineImage() {1349      throw new Error('Should not call beginInlineImage');1350    },1351    beginImageData: function CanvasGraphics_beginImageData() {1352      throw new Error('Should not call beginImageData');1353    },1354    paintFormXObjectBegin: function CanvasGraphics_paintFormXObjectBegin(matrix, bbox) {1355      this.save();1356      this.baseTransformStack.push(this.baseTransform);1357      if (Array.isArray(matrix) && matrix.length === 6) {1358        this.transform.apply(this, matrix);1359      }1360      this.baseTransform = this.ctx.mozCurrentTransform;1361      if (Array.isArray(bbox) && bbox.length === 4) {1362        var width = bbox[2] - bbox[0];1363        var height = bbox[3] - bbox[1];1364        this.ctx.rect(bbox[0], bbox[1], width, height);1365        this.clip();1366        this.endPath();1367      }1368    },1369    paintFormXObjectEnd: function CanvasGraphics_paintFormXObjectEnd() {1370      this.restore();1371      this.baseTransform = this.baseTransformStack.pop();1372    },1373    beginGroup: function CanvasGraphics_beginGroup(group) {1374      this.save();1375      var currentCtx = this.ctx;1376      if (!group.isolated) {1377        (0, _util.info)('TODO: Support non-isolated groups.');1378      }1379      if (group.knockout) {1380        (0, _util.warn)('Knockout groups not supported.');1381      }1382      var currentTransform = currentCtx.mozCurrentTransform;1383      if (group.matrix) {1384        currentCtx.transform.apply(currentCtx, group.matrix);1385      }1386      if (!group.bbox) {1387        throw new Error('Bounding box is required.');1388      }1389      var bounds = _util.Util.getAxialAlignedBoundingBox(group.bbox, currentCtx.mozCurrentTransform);1390      var canvasBounds = [0, 0, currentCtx.canvas.width, currentCtx.canvas.height];1391      bounds = _util.Util.intersect(bounds, canvasBounds) || [0, 0, 0, 0];1392      var offsetX = Math.floor(bounds[0]);1393      var offsetY = Math.floor(bounds[1]);1394      var drawnWidth = Math.max(Math.ceil(bounds[2]) - offsetX, 1);1395      var drawnHeight = Math.max(Math.ceil(bounds[3]) - offsetY, 1);1396      var scaleX = 1,1397          scaleY = 1;1398      if (drawnWidth > MAX_GROUP_SIZE) {1399        scaleX = drawnWidth / MAX_GROUP_SIZE;1400        drawnWidth = MAX_GROUP_SIZE;1401      }1402      if (drawnHeight > MAX_GROUP_SIZE) {1403        scaleY = drawnHeight / MAX_GROUP_SIZE;1404        drawnHeight = MAX_GROUP_SIZE;1405      }1406      var cacheId = 'groupAt' + this.groupLevel;1407      if (group.smask) {1408        cacheId += '_smask_' + this.smaskCounter++ % 2;1409      }1410      var scratchCanvas = this.cachedCanvases.getCanvas(cacheId, drawnWidth, drawnHeight, true);1411      var groupCtx = scratchCanvas.context;1412      groupCtx.scale(1 / scaleX, 1 / scaleY);1413      groupCtx.translate(-offsetX, -offsetY);1414      groupCtx.transform.apply(groupCtx, currentTransform);1415      if (group.smask) {1416        this.smaskStack.push({1417          canvas: scratchCanvas.canvas,1418          context: groupCtx,1419          offsetX: offsetX,1420          offsetY: offsetY,1421          scaleX: scaleX,1422          scaleY: scaleY,1423          subtype: group.smask.subtype,1424          backdrop: group.smask.backdrop,1425          transferMap: group.smask.transferMap || null,1426          startTransformInverse: null1427        });1428      } else {1429        currentCtx.setTransform(1, 0, 0, 1, 0, 0);1430        currentCtx.translate(offsetX, offsetY);1431        currentCtx.scale(scaleX, scaleY);1432      }1433      copyCtxState(currentCtx, groupCtx);1434      this.ctx = groupCtx;1435      this.setGState([['BM', 'source-over'], ['ca', 1], ['CA', 1]]);1436      this.groupStack.push(currentCtx);1437      this.groupLevel++;1438      this.current.activeSMask = null;1439    },1440    endGroup: function CanvasGraphics_endGroup(group) {1441      this.groupLevel--;1442      var groupCtx = this.ctx;1443      this.ctx = this.groupStack.pop();1444      if (this.ctx.imageSmoothingEnabled !== undefined) {1445        this.ctx.imageSmoothingEnabled = false;1446      } else {1447        this.ctx.mozImageSmoothingEnabled = false;...

Using AI Code Generation

1var wpt = require('webpagetest');2var wpt = new WebPageTest('www.webpagetest.org');3var options = {4};5wpt.runTest(options, function(err, data) {6  if (err) return console.error(err);7  console.log('Test submitted to WebPagetest for %s', data.data.testUrl);8  console.log('Test ID: %s', data.data.testId);9  console.log('View test at %s', data.data.userUrl);10});11var options = {12};13wpt.copyCtxState(options, function(err, data) {14  if (err) return console.error(err);15  console.log('Test submitted to WebPagetest for %s', data.data.testUrl);16  console.log('Test ID: %s', data.data.testId);17  console.log('View test at %s', data.data.userUrl);18});

Using AI Code Generation

1var wpt = require('./wpt');2wpt.copyCtxState();3var wpt = require('./wpt');4global.wpt = wpt;5wpt.copyCtxState();6var wpt = require('./wpt');7global.wpt = wpt;8wpt.copyCtxState();9var wpt = require('./wpt');10global.wpt = wpt;11wpt.copyCtxState();12var wpt = require('./wpt');13global.wpt = wpt;14wpt.copyCtxState();15var wpt = require('./wpt');16global.wpt = wpt;17wpt.copyCtxState();18var wpt = require('./wpt');19global.wpt = wpt;

Using AI Code Generation

1var wpt = require('wpt');2var wptCopyCtxState = wpt.copyCtxState;3var wptCtx = wpt.ctx;4var wptCtxState = wpt.ctxState;5var wptCopyCtxState = wpt.copyCtxState;6var wpt = require('wpt');7var wptCopyCtxState = wpt.copyCtxState;8var wptCtx = wpt.ctx;9var wptCtxState = wpt.ctxState;10var wptCopyCtxState = wpt.copyCtxState;11var wpt = require('wpt');12var wptCopyCtxState = wpt.copyCtxState;13var wptCtx = wpt.ctx;14var wptCtxState = wpt.ctxState;15var wptCopyCtxState = wpt.copyCtxState;16var wpt = require('wpt');17var wptCopyCtxState = wpt.copyCtxState;18var wptCtx = wpt.ctx;19var wptCtxState = wpt.ctxState;20var wptCopyCtxState = wpt.copyCtxState;21var wpt = require('wpt');22var wptCopyCtxState = wpt.copyCtxState;23var wptCtx = wpt.ctx;24var wptCtxState = wpt.ctxState;25var wptCopyCtxState = wpt.copyCtxState;26var wpt = require('wpt');27var wptCopyCtxState = wpt.copyCtxState;28var wptCtx = wpt.ctx;29var wptCtxState = wpt.ctxState;30var wptCopyCtxState = wpt.copyCtxState;31var wpt = require('wpt');32var wptCopyCtxState = wpt.copyCtxState;33var wptCtx = wpt.ctx;34var wptCtxState = wpt.ctxState;35var wptCopyCtxState = wpt.copyCtxState;36var wpt = require('wpt');

Using AI Code Generation

1var wptools = require('wptools');2var canvas = document.getElementById("myCanvas");3var ctx = canvas.getContext("2d");4ctx.fillStyle = "#FF0000";5ctx.fillRect(0,0,150,75);6var canvas2 = document.getElementById("myCanvas2");7var ctx2 = canvas2.getContext("2d");8wptools.copyCtxState(ctx, ctx2);9ctx2.fillRect(0,0,150,75);10var wptools = require('wptools');11var canvas = document.getElementById("myCanvas");12var ctx = canvas.getContext("2d");13ctx.fillStyle = "#FF0000";14ctx.fillRect(0,0,150,75);15var canvas2 = document.getElementById("myCanvas2");16var ctx2 = canvas2.getContext("2d");17wptools.copyCtxState(ctx, ctx2);18ctx2.fillRect(0,0,150,75);19var wptools = require('wptools');20var canvas = document.getElementById("myCanvas");21var ctx = canvas.getContext("2d");22ctx.fillStyle = "#FF0000";23ctx.fillRect(0,0,150,75);24var canvas2 = document.getElementById("myCanvas2");25var ctx2 = canvas2.getContext("2d");26wptools.copyCtxState(ctx, ctx2);27ctx2.fillRect(0,0,150,75);28var wptools = require('wptools');29var canvas = document.getElementById("myCanvas");30var ctx = canvas.getContext("2d");31ctx.fillStyle = "#FF0000";32ctx.fillRect(0,0,150,75);33var canvas2 = document.getElementById("myCanvas2");34var ctx2 = canvas2.getContext("2d");35wptools.copyCtxState(ctx, ctx2);36ctx2.fillRect(0,0,150,75);

Using AI Code Generation

1var editor = new WpTextEditor('editor');2editor.copyCtxState();3WpTextEditor.prototype.copyCtxState = function() {4    var ctx = this.canvas.getContext('2d');5    ctx.save();6    ctx.fillStyle = 'red';7    ctx.fillRect(0, 0, 100, 100);8    ctx.restore();9};10function WpTextEditor(canvasId) {11    this.canvas = document.getElementById(canvasId);12    this.canvas.width = 200;13    this.canvas.height = 200;14    this.ctx = this.canvas.getContext('2d');15}

Using AI Code Generation

1wpt.copyCtxState('path_to_context_file.json', 'path_to_new_context_file.json', function(err, data) {2    if(err) {3        console.log('Error: ' + err);4    } else {5        console.log('Data: ' + data);6    }7});8wpt.copyTestState('path_to_test_file.json', 'path_to_new_test_file.json', function(err, data) {9    if(err) {10        console.log('Error: ' + err);11    } else {12        console.log('Data: ' + data);13    }14});15wpt.createTest('path_to_test_file.json', function(err, data) {16    if(err) {17        console.log('Error: ' + err);18    } else {19        console.log('Data: ' + data);20    }21});22wpt.deleteTest('test_id', function(err, data) {23    if(err) {24        console.log('Error: ' + err);25    } else {26        console.log('Data: ' + data);27    }28});29wpt.getLocations(function(err, data) {30    if(err) {31        console.log('Error: ' + err);32    } else {33        console.log('Data: ' + data);34    }35});36wpt.getTestResults('test_id', function(err, data) {37    if(err) {38        console.log('Error: ' + err);39    } else {40        console.log('Data: ' + data);41    }42});43wpt.getTestStatus('test_id', function(err, data) {44    if(err) {45        console.log('Error: ' + err);46    } else {47        console.log('Data: ' + data);48    }49});50wpt.getTesters(function(err, data) {51    if(err) {52        console.log('

Automation Testing Tutorials

Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.