add clear() method

index.d.ts

@@ -109,6 +109,10 @@ export declare class Canvas2dZoom extends HTMLElement {
      * Reset zoom to its initial value.
      */
     resetZoomPan(): void;
+    /**
+     * Delete all content written previously
+     */
+    clear(): void;
     /**
      * Zoom the canvas
      * @param scale a number > 0; to zoom in, provide a value > 1 (2 is a good example), to zoom out provide a value < 1 (e.g. 0.5)

src/ContextProxy.ts

@@ -88,6 +88,16 @@ export class ContextProxy implements ProxyHandler<CanvasRenderingContext2D> {
         ctx.restore();
     }
 
+    clear() {
+        if (this.#pipe.length === 0)
+            return;
+        const ctx: CanvasRenderingContext2D = this.#pipe[0].target;
+        this.#pipe.splice(0, this.#pipe.length);
+        ctx.setTransform(1, 0, 0, 1, 0, 0);
+        ctx.clearRect(-this.#clearXBorder, -this.#clearYBorder, ctx.canvas.width + this.#clearXBorder, ctx.canvas.height + this.#clearYBorder);
+        this._eventDispatcher.dispatchEvent(new Event("clear"));
+    }
+
     private _dispatch(ctx: CanvasRenderingContext2D, oldTransform: DOMMatrix, newTransform: DOMMatrix, zoom: boolean, pan: boolean) {
         ctx.save();
         ctx.setTransform(1, 0, 0, 1, 0, 0);

src/canvas2d-zoom.ts

@@ -52,7 +52,7 @@ export class Canvas2dZoom extends HTMLElement {
     readonly #mouseHandler: MouseEventHandler;
     readonly #keyEventListener: any;
     // keys: passed listeners, values: internal listeners
-    readonly #zoomListeners: WeakMap<(stateChange: ZoomPan, width: number, height: number) => void, any> = new WeakMap();
+    readonly #zoomListeners: Map<(stateChange: ZoomPan, width: number, height: number) => void, any> = new Map();
 
     #zoom: boolean = true;
     #lastFocusPoint: Point|null = null;
@@ -436,6 +436,15 @@ export class Canvas2dZoom extends HTMLElement {
         this.#proxy.resetZoom();
     }
 
+    /**
+     * Delete all content written previously
+     */
+    clear() {
+        Array.from(this.#zoomListeners.values()).forEach(listener => this.removeEventListener("zoom", listener));
+        this.#zoomListeners.clear();
+        this.#proxy.clear();
+    }
+
     /**
      * Zoom the canvas
      * @param scale a number > 0; to zoom in, provide a value > 1 (2 is a good example), to zoom out provide a value < 1 (e.g. 0.5)
@@ -485,8 +494,10 @@ export class Canvas2dZoom extends HTMLElement {
      */
     stopDrawCustom(listener: (stateChange: ZoomPan, width: number, height: number) => void): void {
         const internalListener = this.#zoomListeners.get(listener);
-        if (internalListener)
+        if (internalListener) {
             this.removeEventListener("zoom", internalListener);
+            this.#zoomListeners.delete(listener);
+        }
     }
 
 }