From c2e3764e92f36335169a4bca8a4d2d2a5c25ff52 Mon Sep 17 00:00:00 2001
From: Delirium <nikita@openreplay.com>
Date: Tue, 2 Jul 2024 17:32:58 +0200
Subject: [PATCH] fix ui: fix canvas manager rendering q (#2339)

---
 .../app/player/web/managers/CanvasManager.ts  | 17 +++++++------
 tracker/tracker/src/main/app/canvas.ts        | 25 ++++++++++---------
 2 files changed, 23 insertions(+), 19 deletions(-)

diff --git a/frontend/app/player/web/managers/CanvasManager.ts b/frontend/app/player/web/managers/CanvasManager.ts
index 07eb6ac8b..896686fea 100644
--- a/frontend/app/player/web/managers/CanvasManager.ts
+++ b/frontend/app/player/web/managers/CanvasManager.ts
@@ -155,13 +155,16 @@ export default class CanvasManager extends ListWalker<Timestamp> {
         if (node && node.node) {
           const canvasCtx = (node.node as HTMLCanvasElement).getContext('2d');
           const canvasEl = node.node as HTMLVideoElement;
-          canvasCtx?.drawImage(
-            this.snapImage,
-            0,
-            0,
-            canvasEl.width,
-            canvasEl.height
-          );
+          requestAnimationFrame(() => {
+            canvasCtx?.clearRect(0, 0, canvasEl.width, canvasEl.height);
+            canvasCtx?.drawImage(
+              this.snapImage,
+              0,
+              0,
+              canvasEl.width,
+              canvasEl.height
+            );
+          })
           this.debugCanvas
             ?.getContext('2d')
             ?.drawImage(this.snapImage, 0, 0, 300, 200);
diff --git a/tracker/tracker/src/main/app/canvas.ts b/tracker/tracker/src/main/app/canvas.ts
index 01da58f8d..0230b2ec4 100644
--- a/tracker/tracker/src/main/app/canvas.ts
+++ b/tracker/tracker/src/main/app/canvas.ts
@@ -191,6 +191,7 @@ function captureSnapshot(
     if (!ctx) {
       return ''
     }
+    ctx.clearRect(0, 0, dummy.width, dummy.height)
     ctx.drawImage(canvas, 0, 0, dummy.width, dummy.height)
     dummy.toBlob(onBlob, imageFormat, qualityInt[quality])
   } else {
@@ -198,6 +199,18 @@ function captureSnapshot(
   }
 }
 
+function saveImageData(imageDataBlob: Blob, name: string) {
+  const imageDataUrl = URL.createObjectURL(imageDataBlob)
+  const link = document.createElement('a')
+  link.href = imageDataUrl
+  link.download = name
+  link.style.display = 'none'
+
+  document.body.appendChild(link)
+  link.click()
+  document.body.removeChild(link)
+}
+
 function dataUrlToBlob(dataUrl: string): [Blob, Uint8Array] | null {
   const [header, base64] = dataUrl.split(',')
   if (!header || !base64) return null
@@ -215,16 +228,4 @@ function dataUrlToBlob(dataUrl: string): [Blob, Uint8Array] | null {
   return [new Blob([u8arr], { type: mime }), u8arr]
 }
 
-function saveImageData(imageDataBlob: Blob, name: string) {
-  const imageDataUrl = URL.createObjectURL(imageDataBlob)
-  const link = document.createElement('a')
-  link.href = imageDataUrl
-  link.download = name
-  link.style.display = 'none'
-
-  document.body.appendChild(link)
-  link.click()
-  document.body.removeChild(link)
-}
-
 export default CanvasRecorder