fix resize warning

app/javascript/draw.js

@@ -9,13 +9,17 @@ window.customElements.define('draw-signature', class extends HTMLElement {
     this.pad = new SignaturePad(this.canvas)
 
     this.resizeObserver = new ResizeObserver(() => {
-      const { width, height } = this.canvas
+      requestAnimationFrame(() => {
+        if (!this.canvas) return
 
-      this.setCanvasSize()
+        const { width, height } = this.canvas
 
-      if (this.canvas.width !== width || this.canvas.height !== height) {
+        this.setCanvasSize()
-        this.redrawCanvas(width, height)
+
-      }
+        if (this.canvas.width !== width || this.canvas.height !== height) {
+          this.redrawCanvas(width, height)
+        }
+      })
     })
 
     this.resizeObserver.observe(this.canvas.parentNode)

app/javascript/elements/signature_form.js

@@ -12,13 +12,17 @@ export default targetable(class extends HTMLElement {
     this.pad = new SignaturePad(this.canvas)
 
     this.resizeObserver = new ResizeObserver(() => {
-      const { width, height } = this.canvas
+      requestAnimationFrame(() => {
+        if (!this.canvas) return
 
-      this.setCanvasSize()
+        const { width, height } = this.canvas
 
-      if (this.canvas.width !== width || this.canvas.height !== height) {
+        this.setCanvasSize()
-        this.redrawCanvas(width, height)
+
-      }
+        if (this.canvas.width !== width || this.canvas.height !== height) {
+          this.redrawCanvas(width, height)
+        }
+      })
     })
 
     this.resizeObserver.observe(this.canvas.parentNode)

app/javascript/submission_form/signature_step.vue

@@ -474,13 +474,17 @@ export default {
       this.intersectionObserver.observe(this.$refs.canvas)
 
       this.resizeObserver = new ResizeObserver(() => {
-        const { width, height } = this.$refs.canvas
+        requestAnimationFrame(() => {
+          if (!this.$refs.canvas) return
 
-        this.setCanvasSize()
+          const { width, height } = this.$refs.canvas
 
-        if (this.$refs.canvas.width !== width || this.$refs.canvas.height !== height) {
+          this.setCanvasSize()
-          this.redrawCanvas(width, height)
+
-        }
+          if (this.$refs.canvas.width !== width || this.$refs.canvas.height !== height) {
+            this.redrawCanvas(width, height)
+          }
+        })
       })
 
       this.resizeObserver.observe(this.$refs.canvas.parentNode)