@nasser-sw/fabric 7.0.1-beta2 → 7.0.1-beta4

package/debug/konva/src/Context.ts

@@ -1,1017 +0,0 @@
-import { Util } from './Util.ts';
-import { Konva } from './Global.ts';
-import type { Canvas } from './Canvas.ts';
-import type { Shape } from './Shape.ts';
-import type { IRect } from './types.ts';
-import type { Node } from './Node.ts';
-
-function simplifyArray(arr: Array<any>) {
-  const retArr: Array<any> = [],
-    len = arr.length,
-    util = Util;
-
-  for (let n = 0; n < len; n++) {
-    let val = arr[n];
-    if (util._isNumber(val)) {
-      val = Math.round(val * 1000) / 1000;
-    } else if (!util._isString(val)) {
-      val = val + '';
-    }
-
-    retArr.push(val);
-  }
-
-  return retArr;
-}
-
-const COMMA = ',',
-  OPEN_PAREN = '(',
-  CLOSE_PAREN = ')',
-  OPEN_PAREN_BRACKET = '([',
-  CLOSE_BRACKET_PAREN = '])',
-  SEMICOLON = ';',
-  DOUBLE_PAREN = '()',
-  // EMPTY_STRING = '',
-  EQUALS = '=',
-  // SET = 'set',
-  CONTEXT_METHODS = [
-    'arc',
-    'arcTo',
-    'beginPath',
-    'bezierCurveTo',
-    'clearRect',
-    'clip',
-    'closePath',
-    'createLinearGradient',
-    'createPattern',
-    'createRadialGradient',
-    'drawImage',
-    'ellipse',
-    'fill',
-    'fillText',
-    'getImageData',
-    'createImageData',
-    'lineTo',
-    'moveTo',
-    'putImageData',
-    'quadraticCurveTo',
-    'rect',
-    'roundRect',
-    'restore',
-    'rotate',
-    'save',
-    'scale',
-    'setLineDash',
-    'setTransform',
-    'stroke',
-    'strokeText',
-    'transform',
-    'translate',
-  ];
-
-const CONTEXT_PROPERTIES = [
-  'fillStyle',
-  'strokeStyle',
-  'shadowColor',
-  'shadowBlur',
-  'shadowOffsetX',
-  'shadowOffsetY',
-  'letterSpacing',
-  'lineCap',
-  'lineDashOffset',
-  'lineJoin',
-  'lineWidth',
-  'miterLimit',
-  'direction',
-  'font',
-  'textAlign',
-  'textBaseline',
-  'globalAlpha',
-  'globalCompositeOperation',
-  'imageSmoothingEnabled',
-  'filter',
-] as const;
-
-const traceArrMax = 100;
-
-// Check if CSS filters are supported in the current browser
-let _cssFiltersSupported: boolean | null = null;
-export function isCSSFiltersSupported(): boolean {
-  if (_cssFiltersSupported !== null) {
-    return _cssFiltersSupported;
-  }
-
-  try {
-    const canvas = Util.createCanvasElement();
-    const ctx = canvas.getContext('2d');
-    if (!ctx) {
-      _cssFiltersSupported = false;
-      return false;
-    }
-    return !!ctx && 'filter' in ctx;
-  } catch (e) {
-    _cssFiltersSupported = false;
-    return false;
-  }
-}
-
-interface ExtendedCanvasRenderingContext2D extends CanvasRenderingContext2D {
-  letterSpacing: string;
-}
-
-/**
- * Konva wrapper around native 2d canvas context. It has almost the same API of 2d context with some additional functions.
- * With core Konva shapes you don't need to use this object. But you will use it if you want to create
- * a [custom shape](/docs/react/Custom_Shape.html) or a [custom hit regions](/docs/events/Custom_Hit_Region.html).
- * For full information about each 2d context API use [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D)
- * @constructor
- * @memberof Konva
- * @example
- * const rect = new Konva.Shape({
- *    fill: 'red',
- *    width: 100,
- *    height: 100,
- *    sceneFunc: (ctx, shape) => {
- *      // ctx - is context wrapper
- *      // shape - is instance of Konva.Shape, so it equals to "rect" variable
- *      ctx.rect(0, 0, shape.getAttr('width'), shape.getAttr('height'));
- *
- *      // automatically fill shape from props and draw hit region
- *      ctx.fillStrokeShape(shape);
- *    }
- * })
- */
-export class Context {
-  canvas: Canvas;
-  _context: CanvasRenderingContext2D;
-  traceArr: Array<string>;
-
-  constructor(canvas: Canvas) {
-    this.canvas = canvas;
-
-    if (Konva.enableTrace) {
-      this.traceArr = [];
-      this._enableTrace();
-    }
-  }
-
-  /**
-   * fill shape
-   * @method
-   * @name Konva.Context#fillShape
-   * @param {Konva.Shape} shape
-   */
-  fillShape(shape: Shape) {
-    if (shape.fillEnabled()) {
-      this._fill(shape);
-    }
-  }
-
-  _fill(shape: Shape) {
-    // abstract
-  }
-  /**
-   * stroke shape
-   * @method
-   * @name Konva.Context#strokeShape
-   * @param {Konva.Shape} shape
-   */
-  strokeShape(shape: Shape) {
-    if (shape.hasStroke()) {
-      this._stroke(shape);
-    }
-  }
-
-  _stroke(shape: Shape) {
-    // abstract
-  }
-
-  /**
-   * fill then stroke
-   * @method
-   * @name Konva.Context#fillStrokeShape
-   * @param {Konva.Shape} shape
-   */
-  fillStrokeShape(shape: Shape) {
-    if (shape.attrs.fillAfterStrokeEnabled) {
-      this.strokeShape(shape);
-      this.fillShape(shape);
-    } else {
-      this.fillShape(shape);
-      this.strokeShape(shape);
-    }
-  }
-
-  getTrace(relaxed?: boolean, rounded?: boolean) {
-    let traceArr = this.traceArr,
-      len = traceArr.length,
-      str = '',
-      n,
-      trace,
-      method,
-      args;
-
-    for (n = 0; n < len; n++) {
-      trace = traceArr[n];
-      method = trace.method;
-
-      // methods
-      if (method) {
-        args = trace.args;
-        str += method;
-        if (relaxed) {
-          str += DOUBLE_PAREN;
-        } else {
-          if (Util._isArray(args[0])) {
-            str += OPEN_PAREN_BRACKET + args.join(COMMA) + CLOSE_BRACKET_PAREN;
-          } else {
-            if (rounded) {
-              args = args.map((a) =>
-                typeof a === 'number' ? Math.floor(a) : a
-              );
-            }
-            str += OPEN_PAREN + args.join(COMMA) + CLOSE_PAREN;
-          }
-        }
-      } else {
-        // properties
-        str += trace.property;
-        if (!relaxed) {
-          str += EQUALS + trace.val;
-        }
-      }
-
-      str += SEMICOLON;
-    }
-
-    return str;
-  }
-
-  clearTrace() {
-    this.traceArr = [];
-  }
-  _trace(str) {
-    let traceArr = this.traceArr,
-      len;
-
-    traceArr.push(str);
-    len = traceArr.length;
-
-    if (len >= traceArrMax) {
-      traceArr.shift();
-    }
-  }
-  /**
-   * reset canvas context transform
-   * @method
-   * @name Konva.Context#reset
-   */
-  reset() {
-    const pixelRatio = this.getCanvas().getPixelRatio();
-    this.setTransform(1 * pixelRatio, 0, 0, 1 * pixelRatio, 0, 0);
-  }
-  /**
-   * get canvas wrapper
-   * @method
-   * @name Konva.Context#getCanvas
-   * @returns {Konva.Canvas}
-   */
-  getCanvas() {
-    return this.canvas;
-  }
-  /**
-   * clear canvas
-   * @method
-   * @name Konva.Context#clear
-   * @param {Object} [bounds]
-   * @param {Number} [bounds.x]
-   * @param {Number} [bounds.y]
-   * @param {Number} [bounds.width]
-   * @param {Number} [bounds.height]
-   */
-  clear(bounds?: IRect) {
-    const canvas = this.getCanvas();
-
-    if (bounds) {
-      this.clearRect(
-        bounds.x || 0,
-        bounds.y || 0,
-        bounds.width || 0,
-        bounds.height || 0
-      );
-    } else {
-      this.clearRect(
-        0,
-        0,
-        canvas.getWidth() / canvas.pixelRatio,
-        canvas.getHeight() / canvas.pixelRatio
-      );
-    }
-  }
-  _applyLineCap(shape: Shape) {
-    const lineCap = shape.attrs.lineCap;
-    if (lineCap) {
-      this.setAttr('lineCap', lineCap);
-    }
-  }
-  _applyOpacity(shape: Node) {
-    const absOpacity = shape.getAbsoluteOpacity();
-    if (absOpacity !== 1) {
-      this.setAttr('globalAlpha', absOpacity);
-    }
-  }
-  _applyLineJoin(shape: Shape) {
-    const lineJoin = shape.attrs.lineJoin;
-    if (lineJoin) {
-      this.setAttr('lineJoin', lineJoin);
-    }
-  }
-  _applyMiterLimit(shape: Shape) {
-    const miterLimit = shape.attrs.miterLimit;
-    if (miterLimit != null) {
-      this.setAttr('miterLimit', miterLimit);
-    }
-  }
-
-  setAttr(attr: string, val) {
-    this._context[attr] = val;
-  }
-
-  /**
-   * arc function.
-   * @method
-   * @name Konva.Context#arc
-   */
-  arc(
-    x: number,
-    y: number,
-    radius: number,
-    startAngle: number,
-    endAngle: number,
-    counterClockwise?: boolean
-  ) {
-    this._context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
-  }
-  /**
-   * arcTo function.
-   * @method
-   * @name Konva.Context#arcTo
-   *
-   */
-  arcTo(x1: number, y1: number, x2: number, y2: number, radius: number) {
-    this._context.arcTo(x1, y1, x2, y2, radius);
-  }
-  /**
-   * beginPath function.
-   * @method
-   * @name Konva.Context#beginPath
-   */
-  beginPath() {
-    this._context.beginPath();
-  }
-  /**
-   * bezierCurveTo function.
-   * @method
-   * @name Konva.Context#bezierCurveTo
-   */
-
-  bezierCurveTo(
-    cp1x: number,
-    cp1y: number,
-    cp2x: number,
-    cp2y: number,
-    x: number,
-    y: number
-  ) {
-    this._context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
-  }
-  /**
-   * clearRect function.
-   * @method
-   * @name Konva.Context#clearRect
-   */
-  clearRect(x: number, y: number, width: number, height: number) {
-    this._context.clearRect(x, y, width, height);
-  }
-  /**
-   * clip function.
-   * @method
-   * @name Konva.Context#clip
-   */
-  clip(fillRule?: CanvasFillRule): void;
-  clip(path: Path2D, fillRule?: CanvasFillRule): void;
-  clip(...args: any[]) {
-    this._context.clip.apply(this._context, args as any);
-  }
-  /**
-   * closePath function.
-   * @method
-   * @name Konva.Context#closePath
-   */
-  closePath() {
-    this._context.closePath();
-  }
-  /**
-   * createImageData function.
-   * @method
-   * @name Konva.Context#createImageData
-   */
-  createImageData(width, height) {
-    const a = arguments;
-    if (a.length === 2) {
-      return this._context.createImageData(width, height);
-    } else if (a.length === 1) {
-      return this._context.createImageData(width);
-    }
-  }
-  /**
-   * createLinearGradient function.
-   * @method
-   * @name Konva.Context#createLinearGradient
-   */
-  createLinearGradient(x0: number, y0: number, x1: number, y1: number) {
-    return this._context.createLinearGradient(x0, y0, x1, y1);
-  }
-  /**
-   * createPattern function.
-   * @method
-   * @name Konva.Context#createPattern
-   */
-  createPattern(image: CanvasImageSource, repetition: string | null) {
-    return this._context.createPattern(image, repetition);
-  }
-  /**
-   * createRadialGradient function.
-   * @method
-   * @name Konva.Context#createRadialGradient
-   */
-  createRadialGradient(
-    x0: number,
-    y0: number,
-    r0: number,
-    x1: number,
-    y1: number,
-    r1: number
-  ) {
-    return this._context.createRadialGradient(x0, y0, r0, x1, y1, r1);
-  }
-  /**
-   * drawImage function.
-   * @method
-   * @name Konva.Context#drawImage
-   */
-  drawImage(
-    image: CanvasImageSource,
-    sx: number,
-    sy: number,
-    sWidth?: number,
-    sHeight?: number,
-    dx?: number,
-    dy?: number,
-    dWidth?: number,
-    dHeight?: number
-  ) {
-    // this._context.drawImage(...arguments);
-    const a = arguments,
-      _context = this._context;
-    if (a.length === 3) {
-      _context.drawImage(image, sx, sy);
-    } else if (a.length === 5) {
-      _context.drawImage(image, sx, sy, sWidth as number, sHeight as number);
-    } else if (a.length === 9) {
-      _context.drawImage(
-        image,
-        sx,
-        sy,
-        sWidth as number,
-        sHeight as number,
-        dx as number,
-        dy as number,
-        dWidth as number,
-        dHeight as number
-      );
-    }
-  }
-  /**
-   * ellipse function.
-   * @method
-   * @name Konva.Context#ellipse
-   */
-  ellipse(
-    x: number,
-    y: number,
-    radiusX: number,
-    radiusY: number,
-    rotation: number,
-    startAngle: number,
-    endAngle: number,
-    counterclockwise?: boolean
-  ) {
-    this._context.ellipse(
-      x,
-      y,
-      radiusX,
-      radiusY,
-      rotation,
-      startAngle,
-      endAngle,
-      counterclockwise
-    );
-  }
-  /**
-   * isPointInPath function.
-   * @method
-   * @name Konva.Context#isPointInPath
-   */
-  isPointInPath(
-    x: number,
-    y: number,
-    path?: Path2D,
-    fillRule?: CanvasFillRule
-  ) {
-    if (path) {
-      return this._context.isPointInPath(path, x, y, fillRule);
-    }
-    return this._context.isPointInPath(x, y, fillRule);
-  }
-  /**
-   * fill function.
-   * @method
-   * @name Konva.Context#fill
-   */
-  fill(fillRule?: CanvasFillRule): void;
-  fill(path: Path2D, fillRule?: CanvasFillRule): void;
-  fill(...args: any[]) {
-    // this._context.fill();
-    this._context.fill.apply(this._context, args as any);
-  }
-  /**
-   * fillRect function.
-   * @method
-   * @name Konva.Context#fillRect
-   */
-  fillRect(x: number, y: number, width: number, height: number) {
-    this._context.fillRect(x, y, width, height);
-  }
-  /**
-   * strokeRect function.
-   * @method
-   * @name Konva.Context#strokeRect
-   */
-  strokeRect(x: number, y: number, width: number, height: number) {
-    this._context.strokeRect(x, y, width, height);
-  }
-  /**
-   * fillText function.
-   * @method
-   * @name Konva.Context#fillText
-   */
-  fillText(text: string, x: number, y: number, maxWidth?: number) {
-    if (maxWidth) {
-      this._context.fillText(text, x, y, maxWidth);
-    } else {
-      this._context.fillText(text, x, y);
-    }
-  }
-  /**
-   * measureText function.
-   * @method
-   * @name Konva.Context#measureText
-   */
-  measureText(text: string) {
-    return this._context.measureText(text);
-  }
-  /**
-   * getImageData function.
-   * @method
-   * @name Konva.Context#getImageData
-   */
-  getImageData(sx: number, sy: number, sw: number, sh: number) {
-    return this._context.getImageData(sx, sy, sw, sh);
-  }
-  /**
-   * lineTo function.
-   * @method
-   * @name Konva.Context#lineTo
-   */
-  lineTo(x: number, y: number) {
-    this._context.lineTo(x, y);
-  }
-  /**
-   * moveTo function.
-   * @method
-   * @name Konva.Context#moveTo
-   */
-  moveTo(x: number, y: number) {
-    this._context.moveTo(x, y);
-  }
-  /**
-   * rect function.
-   * @method
-   * @name Konva.Context#rect
-   */
-  rect(x: number, y: number, width: number, height: number) {
-    this._context.rect(x, y, width, height);
-  }
-  /**
-   * roundRect function.
-   * @method
-   * @name Konva.Context#roundRect
-   */
-  roundRect(
-    x: number,
-    y: number,
-    width: number,
-    height: number,
-    radii: number | DOMPointInit | (number | DOMPointInit)[]
-  ) {
-    this._context.roundRect(x, y, width, height, radii);
-  }
-  /**
-   * putImageData function.
-   * @method
-   * @name Konva.Context#putImageData
-   */
-  putImageData(imageData: ImageData, dx: number, dy: number) {
-    this._context.putImageData(imageData, dx, dy);
-  }
-  /**
-   * quadraticCurveTo function.
-   * @method
-   * @name Konva.Context#quadraticCurveTo
-   */
-  quadraticCurveTo(cpx: number, cpy: number, x: number, y: number) {
-    this._context.quadraticCurveTo(cpx, cpy, x, y);
-  }
-  /**
-   * restore function.
-   * @method
-   * @name Konva.Context#restore
-   */
-  restore() {
-    this._context.restore();
-  }
-  /**
-   * rotate function.
-   * @method
-   * @name Konva.Context#rotate
-   */
-  rotate(angle: number) {
-    this._context.rotate(angle);
-  }
-  /**
-   * save function.
-   * @method
-   * @name Konva.Context#save
-   */
-  save() {
-    this._context.save();
-  }
-  /**
-   * scale function.
-   * @method
-   * @name Konva.Context#scale
-   */
-  scale(x: number, y: number) {
-    this._context.scale(x, y);
-  }
-  /**
-   * setLineDash function.
-   * @method
-   * @name Konva.Context#setLineDash
-   */
-  setLineDash(segments: number[]) {
-    // works for Chrome and IE11
-    if (this._context.setLineDash) {
-      this._context.setLineDash(segments);
-    } else if ('mozDash' in this._context) {
-      // verified that this works in firefox
-      (this._context as any)['mozDash'] = segments;
-    } else if ('webkitLineDash' in this._context) {
-      // does not currently work for Safari
-      (this._context as any)['webkitLineDash'] = segments;
-    }
-
-    // no support for IE9 and IE10
-  }
-  /**
-   * getLineDash function.
-   * @method
-   * @name Konva.Context#getLineDash
-   */
-  getLineDash() {
-    return this._context.getLineDash();
-  }
-  /**
-   * setTransform function.
-   * @method
-   * @name Konva.Context#setTransform
-   */
-  setTransform(
-    a: number,
-    b: number,
-    c: number,
-    d: number,
-    e: number,
-    f: number
-  ) {
-    this._context.setTransform(a, b, c, d, e, f);
-  }
-  /**
-   * stroke function.
-   * @method
-   * @name Konva.Context#stroke
-   */
-  stroke(path2d?: Path2D) {
-    if (path2d) {
-      this._context.stroke(path2d);
-    } else {
-      this._context.stroke();
-    }
-  }
-  /**
-   * strokeText function.
-   * @method
-   * @name Konva.Context#strokeText
-   */
-  strokeText(text: string, x: number, y: number, maxWidth?: number) {
-    this._context.strokeText(text, x, y, maxWidth);
-  }
-  /**
-   * transform function.
-   * @method
-   * @name Konva.Context#transform
-   */
-  transform(a: number, b: number, c: number, d: number, e: number, f: number) {
-    this._context.transform(a, b, c, d, e, f);
-  }
-  /**
-   * translate function.
-   * @method
-   * @name Konva.Context#translate
-   */
-  translate(x: number, y: number) {
-    this._context.translate(x, y);
-  }
-  _enableTrace() {
-    let that = this,
-      len = CONTEXT_METHODS.length,
-      origSetter = this.setAttr,
-      n,
-      args;
-
-    // to prevent creating scope function at each loop
-    const func = function (methodName) {
-      let origMethod = that[methodName],
-        ret;
-
-      that[methodName] = function () {
-        args = simplifyArray(Array.prototype.slice.call(arguments, 0));
-        ret = origMethod.apply(that, arguments);
-
-        that._trace({
-          method: methodName,
-          args: args,
-        });
-
-        return ret;
-      };
-    };
-    // methods
-    for (n = 0; n < len; n++) {
-      func(CONTEXT_METHODS[n]);
-    }
-
-    // attrs
-    that.setAttr = function () {
-      origSetter.apply(that, arguments as any);
-      const prop = arguments[0];
-      let val = arguments[1];
-      if (
-        prop === 'shadowOffsetX' ||
-        prop === 'shadowOffsetY' ||
-        prop === 'shadowBlur'
-      ) {
-        val = val / this.canvas.getPixelRatio();
-      }
-      that._trace({
-        property: prop,
-        val: val,
-      });
-    };
-  }
-  _applyGlobalCompositeOperation(node) {
-    const op = node.attrs.globalCompositeOperation;
-    const def = !op || op === 'source-over';
-    if (!def) {
-      this.setAttr('globalCompositeOperation', op);
-    }
-  }
-}
-
-// supported context properties
-type CanvasContextProps = Pick<
-  ExtendedCanvasRenderingContext2D,
-  (typeof CONTEXT_PROPERTIES)[number]
->;
-
-export interface Context extends CanvasContextProps {}
-
-CONTEXT_PROPERTIES.forEach(function (prop) {
-  Object.defineProperty(Context.prototype, prop, {
-    get() {
-      return this._context[prop];
-    },
-    set(val) {
-      this._context[prop] = val;
-    },
-  });
-});
-
-export class SceneContext extends Context {
-  constructor(canvas: Canvas, { willReadFrequently = false } = {}) {
-    super(canvas);
-    this._context = canvas._canvas.getContext('2d', {
-      willReadFrequently,
-    }) as CanvasRenderingContext2D;
-  }
-  _fillColor(shape: Shape) {
-    const fill = shape.fill();
-
-    this.setAttr('fillStyle', fill);
-    shape._fillFunc(this);
-  }
-  _fillPattern(shape: Shape) {
-    this.setAttr('fillStyle', shape._getFillPattern());
-    shape._fillFunc(this);
-  }
-  _fillLinearGradient(shape: Shape) {
-    const grd = shape._getLinearGradient();
-
-    if (grd) {
-      this.setAttr('fillStyle', grd);
-      shape._fillFunc(this);
-    }
-  }
-  _fillRadialGradient(shape: Shape) {
-    const grd = shape._getRadialGradient();
-    if (grd) {
-      this.setAttr('fillStyle', grd);
-      shape._fillFunc(this);
-    }
-  }
-  _fill(shape) {
-    const hasColor = shape.fill(),
-      fillPriority = shape.getFillPriority();
-
-    // priority fills
-    if (hasColor && fillPriority === 'color') {
-      this._fillColor(shape);
-      return;
-    }
-
-    const hasPattern = shape.getFillPatternImage();
-    if (hasPattern && fillPriority === 'pattern') {
-      this._fillPattern(shape);
-      return;
-    }
-
-    const hasLinearGradient = shape.getFillLinearGradientColorStops();
-    if (hasLinearGradient && fillPriority === 'linear-gradient') {
-      this._fillLinearGradient(shape);
-      return;
-    }
-
-    const hasRadialGradient = shape.getFillRadialGradientColorStops();
-    if (hasRadialGradient && fillPriority === 'radial-gradient') {
-      this._fillRadialGradient(shape);
-      return;
-    }
-
-    // now just try and fill with whatever is available
-    if (hasColor) {
-      this._fillColor(shape);
-    } else if (hasPattern) {
-      this._fillPattern(shape);
-    } else if (hasLinearGradient) {
-      this._fillLinearGradient(shape);
-    } else if (hasRadialGradient) {
-      this._fillRadialGradient(shape);
-    }
-  }
-  _strokeLinearGradient(shape) {
-    const start = shape.getStrokeLinearGradientStartPoint(),
-      end = shape.getStrokeLinearGradientEndPoint(),
-      colorStops = shape.getStrokeLinearGradientColorStops(),
-      grd = this.createLinearGradient(start.x, start.y, end.x, end.y);
-
-    if (colorStops) {
-      // build color stops
-      for (let n = 0; n < colorStops.length; n += 2) {
-        grd.addColorStop(colorStops[n] as number, colorStops[n + 1] as string);
-      }
-      this.setAttr('strokeStyle', grd);
-    }
-  }
-  _stroke(shape) {
-    const dash = shape.dash(),
-      // ignore strokeScaleEnabled for Text
-      strokeScaleEnabled = shape.getStrokeScaleEnabled();
-
-    if (shape.hasStroke()) {
-      if (!strokeScaleEnabled) {
-        this.save();
-        const pixelRatio = this.getCanvas().getPixelRatio();
-        this.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
-      }
-
-      this._applyLineCap(shape);
-      if (dash && shape.dashEnabled()) {
-        this.setLineDash(dash);
-        this.setAttr('lineDashOffset', shape.dashOffset());
-      }
-
-      this.setAttr('lineWidth', shape.strokeWidth());
-
-      if (!shape.getShadowForStrokeEnabled()) {
-        this.setAttr('shadowColor', 'rgba(0,0,0,0)');
-      }
-
-      const hasLinearGradient = shape.getStrokeLinearGradientColorStops();
-      if (hasLinearGradient) {
-        this._strokeLinearGradient(shape);
-      } else {
-        this.setAttr('strokeStyle', shape.stroke());
-      }
-
-      shape._strokeFunc(this);
-
-      if (!strokeScaleEnabled) {
-        this.restore();
-      }
-    }
-  }
-  _applyShadow(shape) {
-    const color = shape.getShadowRGBA() ?? 'black',
-      blur = shape.getShadowBlur() ?? 5,
-      offset = shape.getShadowOffset() ?? {
-        x: 0,
-        y: 0,
-      },
-      scale = shape.getAbsoluteScale(),
-      ratio = this.canvas.getPixelRatio(),
-      scaleX = scale.x * ratio,
-      scaleY = scale.y * ratio;
-
-    this.setAttr('shadowColor', color);
-    this.setAttr(
-      'shadowBlur',
-      blur * Math.min(Math.abs(scaleX), Math.abs(scaleY))
-    );
-    this.setAttr('shadowOffsetX', offset.x * scaleX);
-    this.setAttr('shadowOffsetY', offset.y * scaleY);
-  }
-}
-
-export class HitContext extends Context {
-  constructor(canvas: Canvas) {
-    super(canvas);
-    this._context = canvas._canvas.getContext('2d', {
-      willReadFrequently: true,
-    }) as CanvasRenderingContext2D;
-  }
-  _fill(shape: Shape) {
-    this.save();
-    this.setAttr('fillStyle', shape.colorKey);
-    shape._fillFuncHit(this);
-    this.restore();
-  }
-  strokeShape(shape: Shape) {
-    if (shape.hasHitStroke()) {
-      this._stroke(shape);
-    }
-  }
-  _stroke(shape) {
-    if (shape.hasHitStroke()) {
-      // ignore strokeScaleEnabled for Text
-      const strokeScaleEnabled = shape.getStrokeScaleEnabled();
-      if (!strokeScaleEnabled) {
-        this.save();
-        const pixelRatio = this.getCanvas().getPixelRatio();
-        this.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
-      }
-      this._applyLineCap(shape);
-
-      const hitStrokeWidth = shape.hitStrokeWidth();
-      const strokeWidth =
-        hitStrokeWidth === 'auto' ? shape.strokeWidth() : hitStrokeWidth;
-
-      this.setAttr('lineWidth', strokeWidth);
-      this.setAttr('strokeStyle', shape.colorKey);
-      shape._strokeFuncHit(this);
-      if (!strokeScaleEnabled) {
-        this.restore();
-      }
-    }
-  }
-}