fix(eraser): solves issues with eraser

szimek · Jun 26, 2023 · 494538c · 494538c
1 parent 11272b4
commit 494538c
Showing 1 changed file with 11 additions and 3 deletions.
diff --git a/src/signature_pad.ts b/src/signature_pad.ts
@@ -36,6 +36,7 @@ export interface PointGroupOptions {
   maxWidth: number;
   penColor: string;
   velocityFilterWeight: number;
+  compositeOperation: GlobalCompositeOperation;
 }
 
 export interface Options extends Partial<PointGroupOptions> {
@@ -56,6 +57,7 @@ export default class SignaturePad extends SignatureEventTarget {
   public penColor: string;
   public minDistance: number;
   public velocityFilterWeight: number;
+  public compositeOperation: GlobalCompositeOperation;
   public backgroundColor: string;
   public throttle: number;
 
@@ -83,6 +85,7 @@ export default class SignaturePad extends SignatureEventTarget {
     this.dotSize = options.dotSize || 0;
     this.penColor = options.penColor || 'black';
     this.backgroundColor = options.backgroundColor || 'rgba(0,0,0,0)';
+    this.compositeOperation = options.compositeOperation || 'source-over';
 
     this._strokeMoveUpdate = this.throttle
       ? throttle(SignaturePad.prototype._strokeUpdate, this.throttle)
@@ -314,7 +317,7 @@ export default class SignaturePad extends SignatureEventTarget {
     }
   };
 
-  private _getPointGroupOptions(group?: PointGroup) {
+  private _getPointGroupOptions(group?: PointGroup): PointGroupOptions {
     return {
       penColor: group && 'penColor' in group ? group.penColor : this.penColor,
       dotSize: group && 'dotSize' in group ? group.dotSize : this.dotSize,
@@ -324,6 +327,10 @@ export default class SignaturePad extends SignatureEventTarget {
         group && 'velocityFilterWeight' in group
           ? group.velocityFilterWeight
           : this.velocityFilterWeight,
+      compositeOperation:
+        group && 'compositeOperation' in group
+          ? group.compositeOperation
+          : this.compositeOperation,
     };
   }
 
@@ -361,8 +368,8 @@ export default class SignaturePad extends SignatureEventTarget {
       (event as PointerEvent).pressure !== undefined
         ? (event as PointerEvent).pressure
         : (event as Touch).force !== undefined
-        ? (event as Touch).force
-        : 0;
+          ? (event as Touch).force
+          : 0;
 
     const point = this._createPoint(x, y, pressure);
     const lastPointGroup = this._data[this._data.length - 1];
@@ -432,6 +439,7 @@ export default class SignaturePad extends SignatureEventTarget {
     this._lastVelocity = 0;
     this._lastWidth = (options.minWidth + options.maxWidth) / 2;
     this._ctx.fillStyle = options.penColor;
+    this._ctx.globalCompositeOperation = options.compositeOperation;
   }
 
   private _createPoint(x: number, y: number, pressure: number): Point {