How to use copyCtxState method in wpt

Best JavaScript code snippet using wpt

canvas.js

Source:canvas.js Github

copy

Full Screen

...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;...

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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});

Full Screen

Using AI Code Generation

copy

Full Screen

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;

Full Screen

Using AI Code Generation

copy

Full Screen

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');

Full Screen

Using AI Code Generation

copy

Full Screen

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);

Full Screen

Using AI Code Generation

copy

Full Screen

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}

Full Screen

Using AI Code Generation

copy

Full Screen

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('

Full Screen

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.

LambdaTest Learning Hubs:

YouTube

You could also refer to video tutorials over LambdaTest YouTube channel to get step by step demonstration from industry experts.

Run wpt automation tests on LambdaTest cloud grid

Perform automation testing on 3000+ real desktop and mobile devices online.

Try LambdaTest Now !!

Get 100 minutes of automation test minutes FREE!!

Next-Gen App & Browser Testing Cloud

Was this article helpful?

Helpful

NotHelpful