fix(web): address canvas resizing issue in DotLottieWorker after tran…

…sferControlToOffscreen() (#330)

* fix(web): address canvas resizing issue in DotLottieWorker after transferControlToOffscreen()

.changeset/nine-seahorses-hide.md

@@ -0,0 +1,5 @@
+---
+'@lottiefiles/dotlottie-web': patch
+---
+
+fix(web): address canvas resizing issue in DotLottieWorker after transferControlToOffscreen()

apps/dotlottie-web-example/src/main.ts

@@ -133,6 +133,10 @@ app.innerHTML = `
       <button id="start_sm">Start State Machine</button>
       <button id="end_sm">End State Machine</button>
     </div>
+
+    <div>
+      <button id="resize" class="control-button">Resize</button>
+    </div>
   </div>
 </div>
 `;
@@ -229,6 +233,8 @@ fetch(
     const alignSelect = document.getElementById('align') as HTMLSelectElement;
     const stateMachinesSelect = document.getElementById('states') as HTMLSelectElement;
 
+    const resizeButton = document.getElementById('resize') as HTMLButtonElement;
+
     let animationIdx = 0;
 
     nextAnimationButton.addEventListener('click', () => {
@@ -247,6 +253,10 @@ fetch(
       }
     });
 
+    resizeButton.addEventListener('click', () => {
+      dotLottie.resize();
+    });
+
     freezeButton.addEventListener('click', () => {
       dotLottie.freeze();
     });

packages/web/src/worker/dotlottie.ts

@@ -435,9 +435,6 @@ export class DotLottieWorker {
 
     const { height, width } = getCanvasSize(this._canvas);
 
-    this._canvas.width = width;
-    this._canvas.height = height;
-
     await this._sendMessage('resize', { height, instanceId: this._id, width });
     await this._updateDotLottieInstanceState();
   }