From df81f3b223080e85c79e91614c3052a189394e48 Mon Sep 17 00:00:00 2001
From: Fabien LOISON <flo@flogisoft.com>
Date: Thu, 12 Aug 2021 11:35:42 +0200
Subject: [PATCH] Use a clip path instead of a mask to avoid clearing the
 canvas

---
 src/index.ts | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/index.ts b/src/index.ts
index eda799b..5c344e1 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -180,8 +180,8 @@ export default class Perspective {
     }
     // set a clipping path and draw the transformed image on the destination canvas.
     this.ctxd.save();
+    this._applyClipPath(this.ctxd, q);
     this.ctxd.drawImage(ctxt.canvas, 0, 0);
-    this._applyMask(this.ctxd, q);
     this.ctxd.restore();
   }
 
@@ -193,15 +193,13 @@ export default class Perspective {
     return ctx;
   }
 
-  private _applyMask(ctx: CanvasRenderingContext2D, q: Quadrilateral) {
+  private _applyClipPath(ctx: CanvasRenderingContext2D, q: Quadrilateral) {
     ctx.beginPath();
     ctx.moveTo(q.topLeftX, q.topLeftY);
     ctx.lineTo(q.topRightX, q.topRightY);
     ctx.lineTo(q.bottomRightX, q.bottomRightY);
     ctx.lineTo(q.bottomLeftX, q.bottomLeftY);
     ctx.closePath();
-    ctx.globalCompositeOperation = "destination-in";
-    ctx.fill();
-    ctx.globalCompositeOperation = "source-over";
+    ctx.clip();
   }
 }