[BUG] Can't split fruit in game when using Chrome Web on Mobile

[ChunhThanhDe]

🐛 Bug Description

When using Flame with Flutter on web, I encounter an error specifically when using Chrome on mobile devices. The issue doesn't appear on Chrome for desktop, including when using developer tools for a mobile screen.

main.dart.js:12731 Error adding components: Unsupported operation: toImageSync is not supported on the HTML backend. Use drawPicture instead, or toImage.
  at Object.d (main.dart.js:4317:18)
  at qq.qW (main.dart.js:16651:17)
  at jw.ld (main.dart.js:30415:12)
  at jm.N7 ( main.dart.js:38091:5)
  at Ez.$1 (main.dart.js:38006:3)
  at e0.G (main.dart.js:26510:30)
  at hJ.fD (main.dart.js:37915:15)
  at GH.$1 (main.dart.js:29872:24)
  at qh.lk (main.dart.js:30016:3)
  at rY.fD (main.dart.js:29850:3)

I haven't found a solution yet, but I'm investigating it. I’m opening this issue to get notified if the community has a solution.

🔄 Steps to Reproduce

Steps to reproduce the bug:

1. Use Chrome on a mobile device (e.g., Xiaomi Note 9, Xiaomi Note 7, or iPhone 11).
2. Run the Flutter app with Flame.
3. See the error appear in the console.

🖥️ Expected Behavior

The app should run without errors when using Flame on Chrome for mobile, just like it works on Chrome for desktop.

📱 Environment

• Device: Xiaomi Note 9, Xiaomi Note 7, iPhone 11
• OS: Android 10, iOS 14
• App Version: Flutter 3.24.3

📸 Screenshot (if applicable)

Add screenshots or video recordings to help explain your problem.

• On chrome Mobile:

• On chrome Desktop

---

Also i am also tracking this same error code on Flutter SDK issue

Additional context

• This issue occurs only in Chrome on mobile devices.
• The issue does not occur in Chrome for desktop or when using desktop developer tools simulating a mobile device.
• The error message suggests that toImageSync is not supported on the HTML backend for Flutter on the web, and it recommends using drawPicture or toImage.

**Flutter Environment**

[✓] Flutter (Channel stable, 3.24.3, on macOS 15.1 24B83 darwin-arm64, locale en-VN)
    • Flutter version 3.24.3 on channel stable at /Users/chunhthanhde/Development/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 2663184aa7 (8 weeks ago), 2024-09-11 16:27:48 -0500
    • Engine revision 36335019a8
    • Dart version 3.5.3
    • DevTools version 2.37.3

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/chunhthanhde/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.11+0-17.0.11b1207.24-11852314)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 16.0)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 16A242d
    • CocoaPods version 1.16.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2024.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 17.0.11+0-17.0.11b1207.24-11852314)

[✓] VS Code (version 1.95.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.100.0

[✓] Connected device (3 available)
    • macOS (desktop)                 • macos                 • darwin-arm64   • macOS 15.1 24B83 darwin-arm64
    • Mac Designed for iPad (desktop) • mac-designed-for-ipad • darwin         • macOS 15.1 24B83 darwin-arm64
    • Chrome (web)                    • chrome                • web-javascript • Google Chrome 130.0.6723.92

[✓] Network resources
    • All expected network resources are available.

• No issues found!