Change cloneImageElement() to return clone every time

lib/web_ui/lib/src/engine/html_image_codec.dart

@@ -143,7 +143,7 @@ class HtmlImage implements ui.Image {
   }
 
   final DomHTMLImageElement imgElement;
-  bool _requiresClone = false;
+  bool _didClone = false;
 
   bool _disposed = false;
   @override
@@ -204,16 +204,12 @@ class HtmlImage implements ui.Image {
     }
   }
 
-  // Returns absolutely positioned actual image element on first call and
-  // clones on subsequent calls.
   DomHTMLImageElement cloneImageElement() {
-    if (_requiresClone) {
-      return imgElement.cloneNode(true) as DomHTMLImageElement;
-    } else {
-      _requiresClone = true;
+    if (!_didClone) {
+      _didClone = true;
       imgElement.style.position = 'absolute';
-      return imgElement;
     }
+    return imgElement.cloneNode(true) as DomHTMLImageElement;
   }
 
   @override

lib/web_ui/test/html/compositing/canvas_image_blend_mode_golden_test.dart

@@ -111,6 +111,25 @@ Future<void> testMain() async {
     rc.restore();
     await canvasScreenshot(rc, 'canvas_image_blend_and_text');
   });
+
+  test('Does not re-use styles with same image src', () async {
+    final RecordingCanvas rc = RecordingCanvas(
+        const Rect.fromLTRB(0, 0, 400, 400));
+    final HtmlImage flutterImage = createFlutterLogoTestImage();
+    rc.save();
+    rc.drawRect(const Rect.fromLTWH(0, 50, 200, 50), makePaint()
+      ..color = white);
+    rc.drawImage(flutterImage, const Offset(0, 50),
+        makePaint()
+          ..colorFilter = const EngineColorFilter.mode(red, BlendMode.modulate));
+
+    // Expect that the colorFilter is only applied to the first image, since the
+    // colorFilter is applied to a clone of the flutterImage and not the original
+    rc.drawImage(flutterImage, const Offset(0, 100), makePaint());
+
+    rc.restore();
+    await canvasScreenshot(rc, 'canvas_image_same_src');
+  });
 }
 
 Paragraph createTestParagraph() {