Repository: flutter
Issue: [web][html] Text fails to render if it has a foreground `Paint` with a `shader`
Labels: engine,a: typography,platform-web,c: rendering,e: web_html,has reproducible steps,P3,found in release: 2.10,found in release: 2.13,team-web,triaged-web

When I add `LinearGradient` to  `foreground` with `Text`， an error occurs in `createPaintStyle`.

```dart
Container(
  child: Text(
    '8',
    style: TextStyle(
        fontSize: 100,
        foreground: Paint()
          ..style = PaintingStyle.stroke
          ..strokeWidth = 2
          ..shader = LinearGradient(
                  begin: Alignment.bottomLeft,
                  end: Alignment.topRight,
                  colors: [Colors.limeAccent, Colors.cyanAccent])
              .createShader(Rect.fromLTWH(0, 0, 200, 100))),
  ),
),
```

I found that `shader` will take  `Text` render into `canvas` with html renderer ,  but  `_applySpanStyleToCanvas`  will call `canvas.setUpPaint(paint.paintData, null)` with null shaderBounds,  **so `shaderBounds!` will throw error in `_createCanvasGradient`**.

## Steps to Reproduce

run the code above with `flutter run -d chrome --web-renderer html`  . An exception will be `Unexpected null value`.


**Expected results:** <!-- what did you want to see? -->

Workaround in Mobile 

![image](https://user-images.githubusercontent.com/10770362/160316351-174a1676-3628-4f37-b0df-88964517f8b9.png)


**Actual results:** <!-- what did you see? -->

It throws `Unexpected null value`, If I add `fontFeatures` or `decoration`, the error can be avoided , because  Text will render into `p+span` tag ， but  `foreground`  will not be applied like below :

![](https://user-images.githubusercontent.com/10770362/160316562-c22afa01-2b72-4bbf-8db3-f1a78a08e382.png)


<details>
<summary>Code sample</summary>

<!--
      Please create a minimal reproducible sample that shows the problem
      and attach it below between the lines with the backticks.

      To create it you can use `flutter create bug` command and update the `main.dart` file.

      Alternatively, you can use https://dartpad.dev/
      which is capable of creating and running small Flutter apps.

      Without this we will unlikely be able to progress on the issue, and because of that
      we regretfully will have to close it.
-->

```dart
Container(
  child: Text(
    '8',
    style: TextStyle(
        fontSize: 100,
        foreground: Paint()
          ..style = PaintingStyle.stroke
          ..strokeWidth = 2
          ..shader = LinearGradient(
                  begin: Alignment.bottomLeft,
                  end: Alignment.topRight,
                  colors: [Colors.limeAccent, Colors.cyanAccent])
              .createShader(Rect.fromLTWH(0, 0, 200, 100))),
  ),
),
```

</details>

<details>
  <summary>Logs</summary>

<!--
      Run your application with `flutter run --verbose` and attach all the
      log output below between the lines with the backticks. If there is an
      exception, please see if the error message includes enough information
      to explain how to solve the issue.
-->

```
══╡ EXCEPTION CAUGHT BY SCHEDULER LIBRARY ╞═════════════════════════════════════════════════════════
js_primitives.dart:30 The following TypeErrorImpl was thrown during a scheduler callback:
js_primitives.dart:30 Unexpected null value.
js_primitives.dart:30 
js_primitives.dart:30 When the exception was thrown, this was the stack:
js_primitives.dart:30 dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 251:49      throw_
js_primitives.dart:30 dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 528:63  nullCheck
js_primitives.dart:30 lib/_engine/engine/html/shaders/shader.dart 179:42                                [_createCanvasGradient]
js_primitives.dart:30 lib/_engine/engine/html/shaders/shader.dart 169:14                                createPaintStyle
js_primitives.dart:30 lib/_engine/engine/canvas_pool.dart 956:25                                        setUpPaint
js_primitives.dart:30 lib/_engine/engine/html/bitmap_canvas.dart 249:31                                 setUpPaint
js_primitives.dart:30 lib/_engine/engine/text/paint_service.dart 139:11                                 [_applySpanStyleToCanvas]
js_primitives.dart:30 lib/_engine/engine/text/paint_service.dart 88:7                                   [_paintText]
js_primitives.dart:30 lib/_engine/engine/text/paint_service.dart 44:9                                   paint
js_primitives.dart:30 lib/_engine/engine/text/canvas_paragraph.dart 118:19                              paint
js_primitives.dart:30 lib/_engine/engine/html/bitmap_canvas.dart 929:16                                 drawParagraph
js_primitives.dart:30 lib/_engine/engine/html/recording_canvas.dart 1233:11                             apply
js_primitives.dart:30 lib/_engine/engine/html/recording_canvas.dart 190:20                              applyCommands
js_primitives.dart:30 lib/_engine/engine/html/recording_canvas.dart 132:5                               apply
js_primitives.dart:30 lib/_engine/engine/html/picture.dart 464:19                                       <fn>
js_primitives.dart:30 lib/_engine/engine/html/surface.dart 51:16                                        commitScene
js_primitives.dart:30 lib/_engine/engine/html/scene_builder.dart 542:7                                  <fn>
js_primitives.dart:30 lib/_engine/engine/profiler.dart 34:18                                            timeAction
js_primitives.dart:30 lib/_engine/engine/html/scene_builder.dart 536:12                                 build
js_primitives.dart:30 packages/flutter/src/rendering/layer.dart 942:35                                  buildScene
```

<!--
     Run `flutter analyze` and attach any output of that command below.
     If there are any analysis errors, try resolving them before filing this issue.
-->

```
```

<!-- Finally, paste the output of running `flutter doctor -v` here. -->

```
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel unknown, 2.10.3, on macOS 12.2.1 21D62 darwin-x64, locale
    zh-Hans-CN)
[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 13.3)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.1)
[✓] IntelliJ IDEA Ultimate Edition (version 2018.3.5)
```

</details>


<!--
      Consider also attaching screenshots and/or videos to better
      illustrate the issue.

      You can upload them directly on GitHub.
      Beware that video file size is limited to 10MB.
-->