/**
 * fabric.brushes - A collection of brushes for fabric.js (version 4 and up).
 *
 * Made by Arjan Haverkamp, https://www.webgear.nl
 * Copyright 2021 Arjan Haverkamp
 * MIT Licensed
 * @version 1.0 - 2021-06-02
 * @url https://github.com/av01d/fabric-brushes
 *
 * Inspiration sources:
 * - https://github.com/tennisonchan/fabric-brush
 * - https://mrdoob.com/projects/harmony/
 * - http://perfectionkills.com/exploring-canvas-drawing-techniques/
 */
import { fabric } from "fabric-with-all";
import { sprayBrushDataUrl } from "./data/sprayBrushData.js";

(function (fabric) {
  /**
   * Trim a canvas. Returns the left-top coordinate where trimming began.
   * @param {canvas} canvas A canvas element to trim. This element will be trimmed (reference).
   * @returns {Object} Left-top coordinate of trimmed area. Example: {x:65, y:104}
   * @see: https://stackoverflow.com/a/22267731/3360038
   */
  fabric.util.trimCanvas = function (canvas) {
    var ctx = canvas.getContext("2d"),
      w = canvas.width,
      h = canvas.height,
      pix = { x: [], y: [] },
      n,
      imageData = ctx.getImageData(0, 0, w, h),
      fn = function (a, b) {
        return a - b;
      };
    for (var y = 0; y < h; y++) {
      for (var x = 0; x < w; x++) {
        if (imageData.data[(y * w + x) * 4 + 3] > 0) {
          pix.x.push(x);
          pix.y.push(y);
        }
      }
    }
    pix.x.sort(fn);
    pix.y.sort(fn);
    n = pix.x.length - 1;
    //if (n == -1) {
    //	// Nothing to trim... empty canvas?
    //}

    w = pix.x[n] - pix.x[0];
    h = pix.y[n] - pix.y[0];
    if (!w) {
      return;
    }
    var cut = ctx.getImageData(pix.x[0], pix.y[0], w, h);

    canvas.width = w;
    canvas.height = h;
    ctx.putImageData(cut, 0, 0);

    return { x: pix.x[0], y: pix.y[0] };
  };

  /**
   * Extract r,g,b,a components from any valid color.
   * Returns {undefined} when color cannot be parsed.
   *
   * @param {number} color Any color string (named, hex, rgb, rgba)
   * @returns {(Array|undefined)} Example: [0,128,255,1]
   * @see https://gist.github.com/oriadam/396a4beaaad465ca921618f2f2444d49
   */
  fabric.util.colorValues = function (color) {
    if (!color) {
      return;
    }
    if (color.toLowerCase() === "transparent") {
      return [0, 0, 0, 0];
    }
    if (color[0] === "#") {
      if (color.length < 7) {
        // convert #RGB and #RGBA to #RRGGBB and #RRGGBBAA
        color =
          "#" +
          color[1] +
          color[1] +
          color[2] +
          color[2] +
          color[3] +
          color[3] +
          (color.length > 4 ? color[4] + color[4] : "");
      }
      return [
        parseInt(color.substr(1, 2), 16),
        parseInt(color.substr(3, 2), 16),
        parseInt(color.substr(5, 2), 16),
        color.length > 7 ? parseInt(color.substr(7, 2), 16) / 255 : 1,
      ];
    }
    if (color.indexOf("rgb") === -1) {
      // convert named colors
      var tempElem = document.body.appendChild(document.createElement("fictum")); // intentionally use unknown tag to lower chances of css rule override with !important
      var flag = "rgb(1, 2, 3)"; // this flag tested on chrome 59, ff 53, ie9, ie10, ie11, edge 14
      tempElem.style.color = flag;
      if (tempElem.style.color !== flag) {
        return; // color set failed - some monstrous css rule is probably taking over the color of our object
      }
      tempElem.style.color = color;
      if (tempElem.style.color === flag || tempElem.style.color === "") {
        return; // color parse failed
      }
      color = getComputedStyle(tempElem).color;
      document.body.removeChild(tempElem);
    }
    if (color.indexOf("rgb") === 0) {
      if (color.indexOf("rgba") === -1) {
        color += ",1"; // convert 'rgb(R,G,B)' to 'rgb(R,G,B)A' which looks awful but will pass the regxep below
      }
      return color.match(/[.\d]+/g).map(function (a) {
        return +a;
      });
    }
  };

  fabric.Point.prototype.angleBetween = function (that) {
    return Math.atan2(this.x - that.x, this.y - that.y);
  };

  fabric.Point.prototype.normalize = function (thickness) {
    if (null === thickness || undefined === thickness) {
      thickness = 1;
    }

    var length = this.distanceFrom({ x: 0, y: 0 });

    if (length > 0) {
      this.x = (this.x / length) * thickness;
      this.y = (this.y / length) * thickness;
    }

    return this;
  };

  /**
   * Convert a brush drawing on the upperCanvas to an image on the fabric canvas.
   * This makes the drawing editable, it can be moved, rotated, scaled, skewed etc.
   */
  fabric.BaseBrush.prototype.convertToPath = function () {
    var pixelRatio = this.canvas.getRetinaScaling(),
      c = fabric.util.copyCanvasElement(this.canvas.upperCanvasEl),
      xy = fabric.util.trimCanvas(c),
      path = this._points
        .map((arr) => {
          arr[1] = arr[1] / this.canvas.getZoom();
          arr[2] = arr[2] / this.canvas.getZoom();
          return arr.join(" ");
        })
        .join(" "),
      pathElemetn = new fabric.Path(path);
    if (!xy) {
      return;
    }
    let pointerX = this.canvas.viewportTransform[4];
    let pointerY = this.canvas.viewportTransform[5];
    pathElemetn
      .set({
        strokeDashArray: [this._width * 3, this._width * 3],
        strokeWidth: this._width,
        stroke: "black",
        fill: "transparent",
        custom: {
          dashed: true,
        },
      })
      .setCoords();
    let group = new fabric.Group([pathElemetn], {
      left: (xy.x / pixelRatio - pointerX) / this.canvas.getZoom(),
      top: (xy.y / pixelRatio - pointerY) / this.canvas.getZoom(),
      custom: {
        dashed: true,
      },
    });

    this.canvas.add(group).clearContext(this.canvas.contextTop);
    this.canvas.clearContext(this.canvas.contextTop);
  };

  fabric.BaseBrush.prototype.convertToImg = function () {
    var pixelRatio = this.canvas.getRetinaScaling(),
      c = fabric.util.copyCanvasElement(this.canvas.upperCanvasEl),
      xy = fabric.util.trimCanvas(c),
      img = new fabric.Image(c);
    if (!xy) {
      return;
    }
    let pointerX = this.canvas.viewportTransform[4];
    let pointerY = this.canvas.viewportTransform[5];
    img
      .set({
        left: (xy.x / pixelRatio - pointerX) / this.canvas.getZoom(),
        top: (xy.y / pixelRatio - pointerY) / this.canvas.getZoom(),
        scaleX: 1 / pixelRatio / this.canvas.getZoom(),
        scaleY: 1 / pixelRatio / this.canvas.getZoom(),
        custom: {
          type: "pencil",
        },
      })
      .setCoords();
    // 检查是否有图像处理回调函数
    const result = this.canvas?.onBrushImageConverted?.(img);
    !result && this.canvas.add(img);
    this.canvas.clearContext(this.canvas.contextTop);
  };

  fabric.util.getRandom = function (max, min) {
    min = min ? min : 0;
    return Math.random() * ((max ? max : 1) - min) + min;
  };

  fabric.util.clamp = function (n, max, min) {
    if (typeof min !== "number") {
      min = 0;
    }
    return n > max ? max : n < min ? min : n;
  };

  fabric.Stroke = fabric.util.createClass(fabric.Object, {
    color: null,
    inkAmount: null,
    lineWidth: null,

    _point: null,
    _lastPoint: null,
    _currentLineWidth: null,

    initialize: function (ctx, pointer, range, color, lineWidth, inkAmount) {
      var rx = fabric.util.getRandom(range),
        c = fabric.util.getRandom(Math.PI * 2),
        c0 = fabric.util.getRandom(Math.PI * 2),
        x0 = rx * Math.sin(c0),
        y0 = (rx / 2) * Math.cos(c0),
        cos = Math.cos(c),
        sin = Math.sin(c);

      this.ctx = ctx;
      this.color = color;
      this._point = new fabric.Point(
        pointer.x + x0 * cos - y0 * sin,
        pointer.y + x0 * sin + y0 * cos
      );
      this.lineWidth = lineWidth;
      this.inkAmount = inkAmount;
      this._currentLineWidth = lineWidth;

      ctx.lineCap = "round";
    },

    update: function (pointer, subtractPoint, distance) {
      this._lastPoint = fabric.util.object.clone(this._point);
      this._point = this._point.addEquals({
        x: subtractPoint.x,
        y: subtractPoint.y,
      });
      var n = this.inkAmount / (distance + 1),
        per = n > 0.3 ? 0.2 : n < 0 ? 0 : n;
      this._currentLineWidth = this.lineWidth * per;
    },

    draw: function () {
      var ctx = this.ctx;
      ctx.save();
      this.line(ctx, this._lastPoint, this._point, this.color, this._currentLineWidth);
      ctx.restore();
    },

    line: function (ctx, point1, point2, color, lineWidth) {
      ctx.strokeStyle = color;
      ctx.lineWidth = lineWidth;
      ctx.beginPath();
      ctx.moveTo(point1.x, point1.y);
      ctx.lineTo(point2.x, point2.y);
      ctx.stroke();
    },
  });

  /**
   * CrayonBrush
   * Based on code by Tennison Chan.
   */
  fabric.CrayonBrush = fabric.util.createClass(fabric.BaseBrush, {
    color: "#000",
    opacity: 0.6,
    width: 30,

    _baseWidth: 15,
    _inkAmount: 10,
    _latestStrokeLength: 0,
    _point: null,
    _sep: 3,
    _size: 0,
    _latest: null,
    _drawn: false,

    initialize: function (canvas, opt) {
      opt = opt || {};

      this.canvas = canvas;
      this.width = opt.width || this.width;
      this.color = opt.color || this.color;
      this.opacity = opt.opacity || this.opacity;
      this._baseWidth = this.width / 2;
      this._point = new fabric.Point(0, 0);
    },

    onMouseDown: function (pointer) {
      pointer.x = pointer.x * this.canvas.getZoom() + this.canvas.viewportTransform[4];
      pointer.y = pointer.y * this.canvas.getZoom() + this.canvas.viewportTransform[5];
      this.canvas.contextTop.globalAlpha = this.opacity;
      this._size = this.width / 2 + this._baseWidth;
      this._drawn = false;
      this.set(pointer);
    },

    onMouseMove: function (pointer) {
      pointer.x = pointer.x * this.canvas.getZoom() + this.canvas.viewportTransform[4];
      pointer.y = pointer.y * this.canvas.getZoom() + this.canvas.viewportTransform[5];
      this.update(pointer);
      this.draw(this.canvas.contextTop);
    },

    onMouseUp: function () {
      if (this._drawn) {
        this.convertToImg();
      }
      this._latest = null;
      this._latestStrokeLength = 0;
      this.canvas.contextTop.globalAlpha = 1;
    },

    set: function (p) {
      if (this._latest) {
        this._latest.setFromPoint(this._point);
      } else {
        this._latest = new fabric.Point(p.x, p.y);
      }
      fabric.Point.prototype.setFromPoint.call(this._point, p);
    },

    update: function (p) {
      this.set(p);
      this._latestStrokeLength = this._point.subtract(this._latest).distanceFrom({ x: 0, y: 0 });
    },

    draw: function (ctx) {
      var i, j, p, r, c, x, y, w, h, v, s, stepNum, dotSize, dotNum, range;

      v = this._point.subtract(this._latest);
      s = Math.ceil(this._size / 2);
      stepNum = Math.floor(v.distanceFrom({ x: 0, y: 0 }) / s) + 1;
      v.normalize(s);

      dotSize =
        this._sep * fabric.util.clamp((this._inkAmount / this._latestStrokeLength) * 3, 1, 0.5);
      dotNum = Math.ceil(this._size * this._sep);

      range = this._size / 2;

      ctx.save();
      ctx.fillStyle = this.color;
      ctx.beginPath();
      for (i = 0; i < dotNum; i++) {
        for (j = 0; j < stepNum; j++) {
          p = this._latest.add(v.multiply(j));
          r = fabric.util.getRandom(range);
          c = fabric.util.getRandom(Math.PI * 2);
          w = fabric.util.getRandom(dotSize, dotSize / 2);
          h = fabric.util.getRandom(dotSize, dotSize / 2);
          x = p.x + r * Math.sin(c) - w / 2;
          y = p.y + r * Math.cos(c) - h / 2;
          ctx.rect(x, y, w, h);
        }
      }
      ctx.fill();
      ctx.restore();
      this._drawn = true;
    },

    _render: function () {},
  }); // End CrayonBrush

  /**
   * FurBrush
   * Based on code by Mr. Doob.
   */
  fabric.FurBrush = fabric.util.createClass(fabric.BaseBrush, {
    color: "#000",
    opacity: 1,
    width: 1,

    _count: 0,
    _points: [],

    initialize: function (canvas, opt) {
      opt = opt || {};

      this.canvas = canvas;
      this.width = opt.width || this.width;
      this.color = opt.color || this.color;
      this.opacity = opt.opacity || 1;
    },

    onMouseDown: function (pointer) {
      // 添加坐标转换处理画布缩放和偏移
      pointer.x = pointer.x * this.canvas.getZoom() + this.canvas.viewportTransform[4];
      pointer.y = pointer.y * this.canvas.getZoom() + this.canvas.viewportTransform[5];

      this._points = [pointer];
      this._count = 0;

      var ctx = this.canvas.contextTop,
        color = fabric.util.colorValues(this.color);

      ctx.strokeStyle =
        "rgba(" + color[0] + "," + color[1] + "," + color[2] + "," + 0.1 * this.opacity + ")";
      ctx.lineWidth = this.width;

      this._points.push(pointer);
    },

    onMouseMove: function (pointer) {
      // 添加坐标转换处理画布缩放和偏移
      pointer.x = pointer.x * this.canvas.getZoom() + this.canvas.viewportTransform[4];
      pointer.y = pointer.y * this.canvas.getZoom() + this.canvas.viewportTransform[5];

      this._points.push(pointer);

      var i,
        dx,
        dy,
        d,
        ctx = this.canvas.contextTop,
        points = this._points,
        lastPoint = points[points.length - 2];

      ctx.beginPath();
      ctx.moveTo(lastPoint.x, lastPoint.y);
      ctx.lineTo(pointer.x, pointer.y);
      ctx.stroke();

      for (i = 0; i < this._points.length; i++) {
        dx = this._points[i].x - this._points[this._count].x;
        dy = this._points[i].y - this._points[this._count].y;
        d = dx * dx + dy * dy;

        if (d < 2000 && Math.random() > d / 2000) {
          ctx.beginPath();
          ctx.moveTo(pointer.x + dx * 0.5, pointer.y + dy * 0.5);
          ctx.lineTo(pointer.x - dx * 0.5, pointer.y - dy * 0.5);
          ctx.stroke();
        }
      }

      this._count++;
    },

    onMouseUp: function (pointer) {
      if (this._count > 0) {
        this.convertToImg();
      }
    },

    _render: function () {},
  }); // End FurBrush

  /**
   * InkBrush
   * Based on code by Tennison Chan.
   */
  fabric.InkBrush = fabric.util.createClass(fabric.BaseBrush, {
    color: "#000",
    opacity: 1,
    width: 30,

    _baseWidth: 15,
    _inkAmount: 7,
    _lastPoint: null,
    _point: null,
    _range: 10,
    _strokes: null,

    initialize: function (canvas, opt) {
      opt = opt || {};
      this.canvas = canvas;
      this.width = opt.width || this.width;
      this.color = opt.color || this.color;
      this.opacity = opt.opacity || this.opacity;
      this._baseWidth = this.width;
      this._point = new fabric.Point();
    },

    _render: function (pointer) {
      pointer.x = pointer.x * this.canvas.getZoom() + this.canvas.viewportTransform[4];
      pointer.y = pointer.y * this.canvas.getZoom() + this.canvas.viewportTransform[5];
      var len,
        i,
        point = this.setPointer(pointer),
        subtractPoint = point.subtract(this._lastPoint),
        distance = point.distanceFrom(this._lastPoint),
        stroke;
      for (i = 0, len = this._strokes.length; i < len; i++) {
        stroke = this._strokes[i];
        stroke.update(point, subtractPoint, distance);
        stroke.draw();
      }

      if (distance > 30) {
        this.drawSplash(point, this._inkAmount);
      }
    },

    onMouseDown: function (pointer) {
      this.canvas.contextTop.globalAlpha = this.opacity;
      this._resetTip(pointer);
    },

    onMouseMove: function (pointer) {
      if (this.canvas._isCurrentlyDrawing) {
        this._render(pointer);
      }
    },

    onMouseUp: function () {
      this.convertToImg();
      this.canvas.contextTop.globalAlpha = 1;
    },
    hexToRgba: function (hex, alpha) {},
    drawSplash: function (pointer, maxSize) {
      var c,
        r,
        i,
        point,
        ctx = this.canvas.contextTop,
        num = fabric.util.getRandom(12),
        range = maxSize * 10,
        color = this.color;

      ctx.save();
      for (i = 0; i < num; i++) {
        r = fabric.util.getRandom(range, 1);
        c = fabric.util.getRandom(Math.PI * 2);
        point = new fabric.Point(pointer.x + r * Math.sin(c), pointer.y + r * Math.cos(c));

        ctx.fillStyle = color;
        ctx.beginPath();
        ctx.arc(point.x, point.y, fabric.util.getRandom(maxSize) / 2, 0, Math.PI * 2, false);
        ctx.fill();
      }
      ctx.restore();
    },

    setPointer: function (pointer) {
      var point = new fabric.Point(pointer.x, pointer.y);

      this._lastPoint = fabric.util.object.clone(this._point);
      this._point = point;

      return point;
    },

    _resetTip: function (pointer) {
      pointer.x = pointer.x * this.canvas.getZoom() + this.canvas.viewportTransform[4];
      pointer.y = pointer.y * this.canvas.getZoom() + this.canvas.viewportTransform[5];
      var len,
        i,
        point = this.setPointer(pointer);

      this._strokes = [];
      this.size = this.width;
      this._range = this.size / 2;
      for (i = 0, len = this.size; i < len; i++) {
        this._strokes[i] = new fabric.Stroke(
          this.canvas.contextTop,
          point,
          this._range,
          this.color,
          this.width + 10,
          this._inkAmount
        );
      }
    },
  }); // End InkBrush

  /**
   * LongfurBrush
   * Based on code by Mr. Doob.
   */
  fabric.LongfurBrush = fabric.util.createClass(fabric.BaseBrush, {
    color: "#000",
    opacity: 1,
    width: 1,

    _count: 0,
    _points: [],

    initialize: function (canvas, opt) {
      opt = opt || {};

      this.canvas = canvas;
      this.width = opt.width || this.width;
      this.color = opt.color || this.color;
      this.opacity = opt.opacity || 1;
    },

    onMouseDown: function (pointer) {
      pointer.x = pointer.x * this.canvas.getZoom() + this.canvas.viewportTransform[4];
      pointer.y = pointer.y * this.canvas.getZoom() + this.canvas.viewportTransform[5];
      this._points = [pointer];
      this._count = 0;

      var ctx = this.canvas.contextTop,
        color = fabric.util.colorValues(this.color);

      //ctx.globalCompositeOperation = 'source-over';
      ctx.strokeStyle =
        "rgba(" + color[0] + "," + color[1] + "," + color[2] + "," + 0.05 * this.opacity + ")";
      ctx.lineWidth = this.width;
    },

    onMouseMove: function (pointer) {
      pointer.x = pointer.x * this.canvas.getZoom() + this.canvas.viewportTransform[4];
      pointer.y = pointer.y * this.canvas.getZoom() + this.canvas.viewportTransform[5];
      this._points.push(pointer);

      var i,
        dx,
        dy,
        d,
        size,
        ctx = this.canvas.contextTop,
        points = this._points;

      for (i = 0; i < this._points.length; i++) {
        size = -Math.random();

        dx = this._points[i].x - this._points[this._count].x;
        dy = this._points[i].y - this._points[this._count].y;
        d = dx * dx + dy * dy;

        if (d < 1000 && Math.random() > d / 1000) {
          ctx.beginPath();
          ctx.moveTo(
            this._points[this._count].x + dx * size,
            this._points[this._count].y + dy * size
          );
          ctx.lineTo(
            this._points[i].x - dx * size + Math.random() * 2,
            this._points[i].y - dy * size + Math.random() * 2
          );
          ctx.stroke();
        }
      }

      this._count++;
    },

    onMouseUp: function (pointer) {
      if (this._count > 0) {
        this.convertToImg();
      }
    },

    _render: function () {},
  }); // End LongfurBrush
  /**
   * WritingBrush
   * Based on code by Tennison Chan.
   */
  fabric.WritingBrush = fabric.util.createClass(fabric.BaseBrush, {
    color: "#000",
    opacity: 1,
    width: 30,

    _baseWidth: 15,
    _lastPoint: null,
    _lineWidth: 2,
    _point: null,
    _size: 0,

    initialize: function (canvas, opt) {
      opt = opt || {};

      this.canvas = canvas;
      this.width = opt.width || this.width;
      this.color = opt.color || this.color;
      this.opacity = opt.opacity || this.opacity;
      this._baseWidth = this.width;
      this.canvas.contextTop.globalAlpha = this.opacity;
      this._point = new fabric.Point();

      this.canvas.contextTop.lineJoin = "round";
      this.canvas.contextTop.lineCap = "round";
    },

    _render: function (pointer) {
      var ctx, lineWidthDiff, i, len;
      ctx = this.canvas.contextTop;
      ctx.beginPath();
      // let num = this._size / this._lineWidth / 2 / 1.2
      let num = this.width / 1.25 / 2;

      for (i = 0, len = this.width / 1.25; i < len; i++) {
        // for(i = 0, len = (this._size / this._lineWidth) / 1.2; i < len; i++) {
        lineWidthDiff = (this._lineWidth - 1) * i;

        ctx.globalAlpha = 0.8 * this.opacity;
        ctx.moveTo(
          this._lastPoint.x - lineWidthDiff + num,
          this._lastPoint.y + lineWidthDiff - num
        );
        ctx.lineTo(pointer.x - lineWidthDiff + num, pointer.y + lineWidthDiff - num);
        ctx.stroke();
      }

      this._lastPoint = new fabric.Point(pointer.x, pointer.y);
    },

    onMouseDown: function (pointer) {
      pointer.x = pointer.x * this.canvas.getZoom() + this.canvas.viewportTransform[4];
      pointer.y = pointer.y * this.canvas.getZoom() + this.canvas.viewportTransform[5];
      this._lastPoint = pointer;
      this.canvas.contextTop.strokeStyle = this.color;
      this.canvas.contextTop.lineWidth = this._lineWidth;
      this._size = this.width + this._baseWidth;
    },

    onMouseMove: function (pointer) {
      if (this.canvas._isCurrentlyDrawing) {
        pointer.x = pointer.x * this.canvas.getZoom() + this.canvas.viewportTransform[4];
        pointer.y = pointer.y * this.canvas.getZoom() + this.canvas.viewportTransform[5];
        this._render(pointer);
      }
    },

    onMouseUp: function () {
      this.canvas.contextTop.globalAlpha = this.opacity;
      this.canvas.contextTop.globalAlpha = 1;
      this.convertToImg();
    },
  }); // End WritingBrush
  /**
   * MarkerBrush
   * Based on code by Tennison Chan.
   */
  fabric.MarkerBrush = fabric.util.createClass(fabric.BaseBrush, {
    color: "#000",
    opacity: 1,
    width: 30,

    _baseWidth: 15,
    _lastPoint: null,
    _lineWidth: 2,
    _point: null,
    _size: 0,

    initialize: function (canvas, opt) {
      opt = opt || {};

      this.canvas = canvas;
      this.width = opt.width || this.width;
      this.color = opt.color || this.color;
      this.opacity = opt.opacity || this.opacity;
      this._baseWidth = this.width;
      this.canvas.contextTop.globalAlpha = this.opacity;
      this._point = new fabric.Point();

      this.canvas.contextTop.lineJoin = "round";
      this.canvas.contextTop.lineCap = "round";
    },

    _render: function (pointer) {
      var ctx, lineWidthDiff, i, len;
      ctx = this.canvas.contextTop;

      ctx.beginPath();
      let num = this.width / 1.25 / 2;
      for (i = 0, len = this.width / 1.25; i < len; i++) {
        lineWidthDiff = (this._lineWidth - 1) * i;
        ctx.globalAlpha = 0.8 * this.opacity;
        ctx.moveTo(
          this._lastPoint.x + lineWidthDiff - num,
          this._lastPoint.y + lineWidthDiff - num
        );
        ctx.lineTo(pointer.x + lineWidthDiff - num, pointer.y + lineWidthDiff - num);
        ctx.stroke();
      }

      this._lastPoint = new fabric.Point(pointer.x, pointer.y);
    },

    onMouseDown: function (pointer) {
      pointer.x = pointer.x * this.canvas.getZoom() + this.canvas.viewportTransform[4];
      pointer.y = pointer.y * this.canvas.getZoom() + this.canvas.viewportTransform[5];
      this._lastPoint = pointer;
      this.canvas.contextTop.strokeStyle = this.color;
      this.canvas.contextTop.lineWidth = this._lineWidth;
      this._size = this.width + this._baseWidth / 2;
    },

    onMouseMove: function (pointer) {
      if (this.canvas._isCurrentlyDrawing) {
        pointer.x = pointer.x * this.canvas.getZoom() + this.canvas.viewportTransform[4];
        pointer.y = pointer.y * this.canvas.getZoom() + this.canvas.viewportTransform[5];
        this._render(pointer);
      }
    },

    onMouseUp: function () {
      this.canvas.contextTop.globalAlpha = this.opacity;
      this.canvas.contextTop.globalAlpha = 1;
      this.convertToImg();
    },
  }); // End MarkerBrush
  /**
   * test
   * Based on code by Tennison Chan.
   */
  fabric.Test = fabric.util.createClass(fabric.BaseBrush, {
    color: "#000",
    opacity: 1,

    _points: [],

    _width: 2,
    initialize: function (canvas, opt) {
      opt = opt || {};
      this.canvas = canvas;
      this._width = opt._width || this._width;
      this.color = opt.color || this.color;
    },

    _render: function (pointer) {
      var ctx, lineWidthDiff, i, len;
      ctx = this.canvas.contextTop;

      this._points.push(["L", pointer.x, pointer.y]);

      // if(this._points.length % 10 < 5){
      let points = this._points;
      ctx.beginPath();
      ctx.moveTo(points[points.length - 2][1], points[points.length - 2][2]);
      ctx.lineTo(points[points.length - 1][1], points[points.length - 1][2]);
      ctx.stroke();
      // }
    },

    onMouseDown: function (pointer) {
      pointer.x = pointer.x * this.canvas.getZoom() + this.canvas.viewportTransform[4];
      pointer.y = pointer.y * this.canvas.getZoom() + this.canvas.viewportTransform[5];
      this._points = [];
      this._points.push(["M", pointer.x, pointer.y]);

      var ctx = this.canvas.contextTop;
      ctx.strokeStyle = "rgba(" + 0 + "," + 0 + "," + 0 + "," + 1 + ")";
      ctx.lineWidth = this._width * this.canvas.getZoom();
      ctx.lineJoin = ctx.lineCap = "round";
    },

    onMouseMove: function (pointer) {
      if (this.canvas._isCurrentlyDrawing) {
        pointer.x = pointer.x * this.canvas.getZoom() + this.canvas.viewportTransform[4];
        pointer.y = pointer.y * this.canvas.getZoom() + this.canvas.viewportTransform[5];
        this._render(pointer);
      }
    },

    onMouseUp: function () {
      this._points.push(["Z"]);
      this.convertToPath();
    },
  }); // End test

  /**
   * MarkerBrush
   * Based on code by Tennison Chan.
   */
  fabric.MarkerBrush1 = fabric.util.createClass(fabric.BaseBrush, {
    color: "#000",
    opacity: 1,
    width: 30,
    content: 0,

    _baseWidth: 15,
    _lastPoint: null,
    _lineWidth: 2,
    _point: null,
    _size: 0,

    initialize: function (canvas, opt) {
      opt = opt || {};

      this.canvas = canvas;
      this.width = opt.width || this.width;
      this.color = opt.color || this.color;
      this.opacity = opt.opacity || this.opacity;
      this._baseWidth = this.width;
      this.content = opt.content || canvas.width / 2;
      this.canvas.contextTop.globalAlpha = this.opacity;
      this._point = new fabric.Point();

      this.canvas.contextTop.lineJoin = "round";
      this.canvas.contextTop.lineCap = "round";
    },

    _render: function (pointer) {
      var ctx, lineWidthDiff, i, len;

      ctx = this.canvas.contextTop;

      ctx.beginPath();

      for (i = 0, len = this._size / this._lineWidth / 2; i < len; i++) {
        lineWidthDiff = (this._lineWidth - 1) * i;
        let half = this.canvas.width / 2;
        ctx.globalAlpha = 0.8 * this.opacity;
        ctx.moveTo(this._lastPoint.x, this._lastPoint.y);
        let x =
          this.content > this._lastPoint.x
            ? this.content - this._lastPoint.x + this.content
            : this.content * 2 - this._lastPoint.x;
        ctx.lineTo(x, this._lastPoint.y);
        // ctx.lineTo(pointer.y + lineWidthDiff,pointer.x + lineWidthDiff);
        ctx.stroke();
      }

      this._lastPoint = new fabric.Point(pointer.x, pointer.y);
    },

    onMouseDown: function (pointer) {
      // 添加坐标转换处理画布缩放和偏移
      pointer.x = pointer.x * this.canvas.getZoom() + this.canvas.viewportTransform[4];
      pointer.y = pointer.y * this.canvas.getZoom() + this.canvas.viewportTransform[5];

      this._lastPoint = pointer;
      this.canvas.contextTop.strokeStyle = this.color;
      this.canvas.contextTop.lineWidth = this._lineWidth;
      this._size = this.width + this._baseWidth;
    },

    onMouseMove: function (pointer) {
      if (this.canvas._isCurrentlyDrawing) {
        // 添加坐标转换处理画布缩放和偏移
        pointer.x = pointer.x * this.canvas.getZoom() + this.canvas.viewportTransform[4];
        pointer.y = pointer.y * this.canvas.getZoom() + this.canvas.viewportTransform[5];

        this._render(pointer);
      }
    },

    onMouseUp: function () {
      this.canvas.contextTop.globalAlpha = this.opacity;
      this.canvas.contextTop.globalAlpha = 1;
      this.convertToImg();
    },
  }); // End MarkerBrush1
  /**
   * PenBrush
   * Based on code by Tennison Chan.
   */
  fabric.PenBrush = fabric.util.createClass(fabric.BaseBrush, {
    color: "#000",
    opacity: 1,
    width: 30,

    _baseWidth: 15,
    _lastPoint: null,
    _lineWidth: 2,
    _point: null,
    _size: 0,

    initialize: function (canvas, opt) {
      opt = opt || {};

      this.canvas = canvas;
      this.width = opt.width || this.width;
      this.color = opt.color || this.color;
      this.opacity = opt.opacity || this.opacity;
      this._baseWidth = this.width;
      this.canvas.contextTop.globalAlpha = this.opacity;
      this._point = new fabric.Point();

      this.canvas.contextTop.lineJoin = "round";
      this.canvas.contextTop.lineCap = "round";
    },

    _render: function (pointer) {
      var ctx, lineWidthDiff, i, len;
      ctx = this.canvas.contextTop;
      ctx.beginPath();
      // let num = this._size / this._lineWidth / 2 / 1.2
      let num = this.width / 1.25 / 2;
      for (i = 0, len = this.width / 1.25; i < len; i++) {
        // for(i = 0, len = (this._size / this._lineWidth) / 1.2; i < len; i++) {
        var randomNum = Math.random() * (0.6 - 0.2) + 0.2;
        var color = this.color.replace(/1(?=\))/, randomNum);
        this.canvas.contextTop.strokeStyle = color;

        lineWidthDiff = (this._lineWidth - 1) * i;

        ctx.globalAlpha = 0.8 * this.opacity;
        ctx.moveTo(this._lastPoint.x, this._lastPoint.y + lineWidthDiff - num);
        ctx.lineTo(pointer.x, pointer.y + lineWidthDiff - num);
        ctx.stroke();
      }

      this._lastPoint = new fabric.Point(pointer.x, pointer.y);
    },

    onMouseDown: function (pointer) {
      pointer.x = pointer.x * this.canvas.getZoom() + this.canvas.viewportTransform[4];
      pointer.y = pointer.y * this.canvas.getZoom() + this.canvas.viewportTransform[5];
      this._lastPoint = pointer;
      this.canvas.contextTop.lineWidth = this._lineWidth;
      this._size = this.width + this._baseWidth;
    },

    onMouseMove: function (pointer) {
      if (this.canvas._isCurrentlyDrawing) {
        pointer.x = pointer.x * this.canvas.getZoom() + this.canvas.viewportTransform[4];
        pointer.y = pointer.y * this.canvas.getZoom() + this.canvas.viewportTransform[5];
        this._render(pointer);
      }
    },

    onMouseUp: function () {
      this.canvas.contextTop.globalAlpha = this.opacity;
      this.canvas.contextTop.globalAlpha = 1;
      this.convertToImg();
    },
  }); // End PenBrush
  /**
   * RibbonBrush
   * Based on code by Mr. Doob.
   */
  fabric.RibbonBrush = fabric.util.createClass(fabric.BaseBrush, {
    color: "#000",
    opacity: 1,
    width: 1,

    _nrPainters: 50,
    _painters: [],
    _lastPoint: null,
    _interval: null,

    initialize: function (canvas, opt) {
      opt = opt || {};
      this.canvas = canvas;
      this.width = opt.width || this.width;
      this._nrPainters = opt._nrPainters || this._nrPainters;
      this.color = opt.color || this.color;
      this.opacity = opt.opacity || this.opacity;
      for (var i = 0; i < this._nrPainters; i++) {
        this._painters.push({
          dx: this.canvas.width / 2,
          dy: this.canvas.height / 2,
          ax: 0,
          ay: 0,
          div: 0.1,
          ease: Math.random() * 0.2 + 0.6,
        });
      }
    },

    update: function () {
      var ctx = this.canvas.contextTop,
        painters = this._painters;
      for (var i = 0; i < painters.length; i++) {
        ctx.beginPath();
        ctx.moveTo(painters[i].dx, painters[i].dy);
        painters[i].dx -= painters[i].ax =
          (painters[i].ax + (painters[i].dx - this._lastPoint.x) * painters[i].div) *
          painters[i].ease;
        painters[i].dy -= painters[i].ay =
          (painters[i].ay + (painters[i].dy - this._lastPoint.y) * painters[i].div) *
          painters[i].ease;
        ctx.lineTo(painters[i].dx, painters[i].dy);
        ctx.stroke();
      }
    },

    onMouseDown: function (pointer) {
      var ctx = this.canvas.contextTop,
        color = fabric.util.colorValues(this.color);

      this._painters = [];
      for (var i = 0; i < this._nrPainters; i++) {
        this._painters.push({
          dx: this.canvas.width / 2,
          dy: this.canvas.height / 2,
          ax: 0,
          ay: 0,
          div: 0.1,
          ease: Math.random() * 0.2 + 0.6,
        });
      }
      pointer.x = pointer.x * this.canvas.getZoom() + this.canvas.viewportTransform[4];
      pointer.y = pointer.y * this.canvas.getZoom() + this.canvas.viewportTransform[5];
      this._lastPoint = pointer;

      //ctx.globalCompositeOperation = 'source-over';
      ctx.strokeStyle =
        "rgba(" + color[0] + "," + color[1] + "," + color[2] + "," + 0.05 * this.opacity + ")";
      ctx.lineWidth = this.width;

      for (let i = 0; i < this._nrPainters; i++) {
        this._painters[i].dx = pointer.x;
        this._painters[i].dy = pointer.y;
      }

      var self = this;
      this._interval = setInterval(function () {
        self.update();
      }, 1000 / 60);
    },

    onMouseMove: function (pointer) {
      pointer.x = pointer.x * this.canvas.getZoom() + this.canvas.viewportTransform[4];
      pointer.y = pointer.y * this.canvas.getZoom() + this.canvas.viewportTransform[5];
      this._lastPoint = pointer;
    },

    onMouseUp: function (pointer) {
      clearInterval(this._interval);
      this.convertToImg();
    },

    _render: function () {},
  }); // End RibbonBrush

  /**
   * ShadedBrush
   * Based on code by Mr. Doob.
   */
  fabric.ShadedBrush = fabric.util.createClass(fabric.BaseBrush, {
    color: "#000",
    opacity: 0.3,
    width: 1,
    shadeDistance: 1000,

    _points: [],

    initialize: function (canvas, opt) {
      opt = opt || {};

      this.canvas = canvas;
      this.width = opt.width || this.width;
      this.color = opt.color || this.color;
      this.opacity = opt.opacity || this.opacity;
      this.shadeDistance = opt.shadeDistance || 1000;
    },

    onMouseDown: function (pointer) {
      pointer.x = pointer.x * this.canvas.getZoom() + this.canvas.viewportTransform[4];
      pointer.y = pointer.y * this.canvas.getZoom() + this.canvas.viewportTransform[5];
      this._points = [pointer];

      var ctx = this.canvas.contextTop,
        color = fabric.util.colorValues(this.color);

      ctx.strokeStyle =
        "rgba(" + color[0] + "," + color[1] + "," + color[2] + "," + this.opacity + ")";
      ctx.lineWidth = this.width;
      ctx.lineJoin = ctx.lineCap = "round";
    },

    onMouseMove: function (pointer) {
      pointer.x = pointer.x * this.canvas.getZoom() + this.canvas.viewportTransform[4];
      pointer.y = pointer.y * this.canvas.getZoom() + this.canvas.viewportTransform[5];
      this._points.push(pointer);

      var ctx = this.canvas.contextTop,
        points = this._points,
        dx,
        dy,
        d; // 在此处声明变量

      ctx.beginPath();
      ctx.moveTo(points[points.length - 2].x, points[points.length - 2].y);
      ctx.lineTo(points[points.length - 1].x, points[points.length - 1].y);
      ctx.stroke();

      for (var i = 0, len = points.length; i < len; i++) {
        dx = points[i].x - points[points.length - 1].x;
        dy = points[i].y - points[points.length - 1].y;
        d = dx * dx + dy * dy;

        if (d < this.shadeDistance) {
          ctx.beginPath();
          ctx.moveTo(
            points[points.length - 1].x + dx * 0.2,
            points[points.length - 1].y + dy * 0.2
          );
          ctx.lineTo(points[i].x - dx * 0.2, points[i].y - dy * 0.2);
          ctx.stroke();
        }
      }
    },

    onMouseUp: function (pointer) {
      if (this._points.length > 1) {
        this.convertToImg();
      }
    },

    _render: function () {},
  }); // End ShadedBrush

  /**
   * SketchyBrush
   * Based on code by Mr. Doob.
   */
  fabric.SketchyBrush = fabric.util.createClass(fabric.BaseBrush, {
    color: "#000",
    opacity: 1,
    width: 1,

    _count: 0,
    _points: [],

    initialize: function (canvas, opt) {
      opt = opt || {};

      this.canvas = canvas;
      this.width = opt.width || this.width;
      this.color = opt.color || this.color;
      this.opacity = opt.opacity || this.opacity;
    },

    onMouseDown: function (pointer) {
      this.canvas.contextTop.globalAlpha = this.opacity;

      // 坐标转换
      pointer.x = pointer.x * this.canvas.getZoom() + this.canvas.viewportTransform[4];
      pointer.y = pointer.y * this.canvas.getZoom() + this.canvas.viewportTransform[5];

      this._points = [pointer];
      this._count = 0;
      this._drawn = false;

      // 设置绘图样式
      var ctx = this.canvas.contextTop;
      var color = fabric.util.colorValues(this.color);

      ctx.lineWidth = this.width;
      ctx.strokeStyle =
        "rgba(" + color[0] + "," + color[1] + "," + color[2] + "," + 0.3 * this.opacity + ")";
    },

    onMouseMove: function (pointer) {
      // 坐标转换
      pointer.x = pointer.x * this.canvas.getZoom() + this.canvas.viewportTransform[4];
      pointer.y = pointer.y * this.canvas.getZoom() + this.canvas.viewportTransform[5];

      this._points.push(pointer);

      var i, dx, dy, d;
      var factor = 0.3 * this.width;
      var ctx = this.canvas.contextTop;
      var points = this._points;
      var lastPoint = points.length > 1 ? points[points.length - 2] : points[0]; // 修复第一次无上一个点的问题

      // 绘制主线条
      ctx.beginPath();
      ctx.moveTo(lastPoint.x, lastPoint.y);
      ctx.lineTo(pointer.x, pointer.y);
      ctx.stroke();

      // 增加透明度设置
      var color = fabric.util.colorValues(this.color);
      ctx.strokeStyle =
        "rgba(" + color[0] + "," + color[1] + "," + color[2] + "," + 0.2 * this.opacity + ")";

      // 修改循环逻辑，确保在有点时能画出效果
      if (this._count > 0) {
        // 确保有历史点可用
        for (i = 0; i < points.length; i++) {
          dx = points[i].x - points[this._count].x;
          dy = points[i].y - points[this._count].y;
          d = dx * dx + dy * dy;

          if (d < 4000 && Math.random() > d / 2000) {
            ctx.beginPath();
            ctx.moveTo(points[this._count].x + dx * factor, points[this._count].y + dy * factor);
            ctx.lineTo(points[i].x - dx * factor, points[i].y - dy * factor);
            ctx.stroke();
            this._drawn = true;
          }
        }
      }

      this._count++;
    },

    onMouseUp: function (pointer) {
      if (this._count > 0 || this._drawn) {
        this.convertToImg();
      }
      this.canvas.contextTop.globalAlpha = 1;
    },

    _render: function () {},
  }); // End SketchyBrush

  /**
   * SpraypaintBrush
   * Based on code by Tennison Chan.
   */
  fabric.SpraypaintBrush = fabric.util.createClass(fabric.BaseBrush, {
    color: "#000",
    opacity: 1,
    width: 30,

    _baseWidth: 40,
    _inkAmount: 0,
    _interval: 20,
    _lastPoint: null,
    _point: null,
    brush: null,
    sprayBrushDataUrl: sprayBrushDataUrl,

    initialize: function (canvas, opt) {
      var self = this;
      opt = opt || {};

      this.canvas = canvas;
      this.width = opt.width || this.width;
      this.opacity = opt.opacity || this.opacity;
      this.color = opt.color || this.color;

      this.canvas.contextTop.lineJoin = "round";
      this.canvas.contextTop.lineCap = "round";

      this._reset();

      fabric.Image.fromURL(
        this.sprayBrushDataUrl,
        function (brush) {
          self.brush = brush;
          self.brush.filters = [];
          self._setColor(self.color || this.color);
        },
        { crossOrigin: "anonymous" }
      );
    },

    _setColor: function (color) {
      this.color = color;
      this.brush.filters[0] = new fabric.Image.filters.BlendColor({
        color: color,
        alpha: 1,
        mode: "tint",
      });
      this.brush.applyFilters();
    },

    onMouseDown: function (pointer) {
      this.canvas.contextTop.globalAlpha = this.opacity;
      pointer.x = pointer.x * this.canvas.getZoom() + this.canvas.viewportTransform[4];
      pointer.y = pointer.y * this.canvas.getZoom() + this.canvas.viewportTransform[5];
      this._point = new fabric.Point(pointer.x, pointer.y);
      this._lastPoint = this._point;

      // this.size = this.width + this._baseWidth;
      this.size = this.width + this.width / 2;
      this._inkAmount = 0;

      this._setColor(this.color);
      this._render();
    },

    onMouseMove: function (pointer) {
      pointer.x = pointer.x * this.canvas.getZoom() + this.canvas.viewportTransform[4];
      pointer.y = pointer.y * this.canvas.getZoom() + this.canvas.viewportTransform[5];
      this._lastPoint = this._point;
      this._point = new fabric.Point(pointer.x, pointer.y);
    },

    onMouseUp: function () {
      var self = this;
      setTimeout(function () {
        self.convertToImg();
        self._reset();
      }, this._interval);
    },

    _render: function () {
      var self = this;

      function draw() {
        var point, distance, angle, amount, x, y;

        point = new fabric.Point(self._point.x || 0, self._point.y || 0);
        distance = point.distanceFrom(self._lastPoint);
        angle = point.angleBetween(self._lastPoint);
        amount = 100 / self.size / (Math.pow(distance, 2) + 1);

        self._inkAmount += amount;
        self._inkAmount = Math.max(self._inkAmount - distance / 10, 0);

        x = self._lastPoint.x + Math.sin(angle) - self.size / 2;
        y = self._lastPoint.y + Math.cos(angle) - self.size / 2;
        self.canvas.contextTop.drawImage(self.brush._element, x, y, self.size, self.size);

        if (self.canvas._isCurrentlyDrawing) {
          setTimeout(draw, self._interval);
        } else {
          self._reset();
        }
      }

      draw();
    },

    _reset: function () {
      this._point = null;
      this._lastPoint = null;
      this.canvas.contextTop.globalAlpha = 1;
    },
  }); // End SpraypaintBrush

  /**
   * SquaresBrush
   * Based on code by Mr. Doob.
   */
  fabric.SquaresBrush = fabric.util.createClass(fabric.BaseBrush, {
    color: "#000",
    bgColor: "#fff",
    opacity: 1,
    width: 1,

    _lastPoint: null,
    _drawn: false,

    initialize: function (canvas, opt) {
      opt = opt || {};

      this.canvas = canvas;
      this.width = opt.width || this.width;
      this.color = opt.color || this.color;
      this.bgColor = opt.bgColor || "#fff";
      this.opacity = opt.opacity || this.opacity;
    },

    onMouseDown: function (pointer) {
      var ctx = this.canvas.contextTop,
        color = fabric.util.colorValues(this.color),
        bgColor = fabric.util.colorValues(this.bgColor);
      pointer.x = pointer.x * this.canvas.getZoom() + this.canvas.viewportTransform[4];
      pointer.y = pointer.y * this.canvas.getZoom() + this.canvas.viewportTransform[5];
      this._lastPoint = pointer;
      this._drawn = false;

      //ctx.globalCompositeOperation = 'source-over';
      this.canvas.contextTop.globalAlpha = this.opacity;
      ctx.fillStyle =
        "rgba(" + bgColor[0] + "," + bgColor[1] + "," + bgColor[2] + "," + bgColor[3] + ")";
      ctx.strokeStyle = "rgba(" + color[0] + "," + color[1] + "," + color[2] + "," + color[3] + ")";
      ctx.lineWidth = this.width;
    },

    onMouseMove: function (pointer) {
      pointer.x = pointer.x * this.canvas.getZoom() + this.canvas.viewportTransform[4];
      pointer.y = pointer.y * this.canvas.getZoom() + this.canvas.viewportTransform[5];
      var ctx = this.canvas.contextTop,
        dx = pointer.x - this._lastPoint.x,
        dy = pointer.y - this._lastPoint.y,
        angle = 1.57079633,
        px = Math.cos(angle) * dx - Math.sin(angle) * dy,
        py = Math.sin(angle) * dx + Math.cos(angle) * dy;

      ctx.beginPath();
      ctx.moveTo(this._lastPoint.x - px, this._lastPoint.y - py);
      ctx.lineTo(this._lastPoint.x + px, this._lastPoint.y + py);
      ctx.lineTo(pointer.x + px, pointer.y + py);
      ctx.lineTo(pointer.x - px, pointer.y - py);
      ctx.lineTo(this._lastPoint.x - px, this._lastPoint.y - py);
      ctx.fill();
      ctx.stroke();

      this._lastPoint = pointer;
      this._drawn = true;
    },

    onMouseUp: function (pointer) {
      if (this._drawn) {
        this.convertToImg();
      }
      this.canvas.contextTop.globalAlpha = 1;
    },

    _render: function () {},
  }); // End SquaresBrush

  /**
   * WebBrush
   * Based on code by Mr. Doob.
   */
  fabric.WebBrush = fabric.util.createClass(fabric.BaseBrush, {
    color: "#000",
    opacity: 1,
    width: 1,

    _count: 0,
    _points: [],

    initialize: function (canvas, opt) {
      opt = opt || {};

      this.canvas = canvas;
      this.width = opt.width || this.width;
      this.color = opt.color || this.color;
      this.opacity = opt.opacity || 1;
    },

    onMouseDown: function (pointer) {
      pointer.x = pointer.x * this.canvas.getZoom() + this.canvas.viewportTransform[4];
      pointer.y = pointer.y * this.canvas.getZoom() + this.canvas.viewportTransform[5];
      this._points = [pointer];
      this._count = 0;
      this._colorValues = fabric.util.colorValues(this.color);
    },

    onMouseMove: function (pointer) {
      pointer.x = pointer.x * this.canvas.getZoom() + this.canvas.viewportTransform[4];
      pointer.y = pointer.y * this.canvas.getZoom() + this.canvas.viewportTransform[5];
      this._points.push(pointer);

      var ctx = this.canvas.contextTop,
        points = this._points,
        lastPoint = points[points.length - 2],
        colorValues = this._colorValues,
        i,
        dx,
        dy,
        d;

      ctx.lineWidth = this.width;
      ctx.strokeStyle =
        "rgba(" +
        colorValues[0] +
        "," +
        colorValues[1] +
        "," +
        colorValues[2] +
        "," +
        0.5 * this.opacity +
        ")";

      ctx.beginPath();
      ctx.moveTo(lastPoint.x, lastPoint.y);
      ctx.lineTo(pointer.x, pointer.y);
      ctx.stroke();

      ctx.strokeStyle =
        "rgba(" +
        colorValues[0] +
        "," +
        colorValues[1] +
        "," +
        colorValues[2] +
        "," +
        0.1 * this.opacity +
        ")";

      for (i = 0; i < points.length; i++) {
        dx = points[i].x - points[this._count].x;
        dy = points[i].y - points[this._count].y;
        d = dx * dx + dy * dy;

        if (d < 2500 && Math.random() > 0.9) {
          ctx.beginPath();
          ctx.moveTo(points[this._count].x, points[this._count].y);
          ctx.lineTo(points[i].x, points[i].y);
          ctx.stroke();
        }
      }
      this._count++;
    },

    onMouseUp: function (pointer) {
      if (this._count > 0) {
        this.convertToImg();
      }
    },

    _render: function () {},
  }); // End WebBrush
})(typeof fabric !== "undefined" ? fabric : require("fabric").fabric);