fix: Don't draw orange border when re-rendering screenshot (#120)

* fix: Don't need to draw a border around the img

Not in the final designs

* fix: inadvertant effects

* The effect to draw the annotation was executing unnecessarily. Give the
effect a proper list of dependencies to prevent unnecessary calls.
* Properly cleanup event handler in the case the effect does run again.

Author: mhan83

webview-ui/test-generation/src/Screenshot.tsx

@@ -25,14 +25,13 @@ export function Screenshot(props: ScreenshotProps) {
     if (!context) {
       return;
     }
+
     const img = new Image();
     img.src = src;
 
-    img.onload = () => {
+    const onload = () => {
       context.drawImage(img, 0, 0, imgWidth, imgHeight);
 
-      context.strokeRect(0, 0, imgWidth, imgHeight);
-
       if (annotation) {
         context.lineWidth = 3;
         context.rect(
@@ -46,6 +45,18 @@ export function Screenshot(props: ScreenshotProps) {
         context.stroke();
       }
     };
-  }, [ref, annotation, src, imgWidth, imgHeight]);
+    img.addEventListener('load', onload);
+
+    return () => img.removeEventListener('load', onload);
+  }, [
+    ref,
+    annotation.x,
+    annotation.y,
+    annotation.width,
+    annotation.height,
+    src,
+    imgWidth,
+    imgHeight,
+  ]);
   return <canvas ref={ref} width={imgWidth} height={imgHeight} />;
 }