Repository: flutter
Issue: CanvasKit CPU rendering is incorrectly cropped
Labels: engine,dependency: skia,platform-web,platform-linux,c: rendering,e: web_canvaskit,has reproducible steps,P2,found in release: 3.0,found in release: 3.1,team-web,triaged-web

## Summary

CanvasKit renderer can use WebGl or CPU, while using it it generates a Canvas to paint the surface on it, usually this canvas is larger than the current surface, so it draws the surface:
- WebGl: On the lower-left corner
- Cpu: On the upper-left corner

Demo:  

[Screencast from 04-08-22 12:58:35.webm](https://user-images.githubusercontent.com/4956754/182903165-175a7174-4374-4b5d-beb6-ab95b9ed425f.webm)

## Provided demo:
CanvasKit Application with using webgl:  https://splendid-expansion.surge.sh/
CanvasKit Application with using cpu rendering:  https://decorous-fowl.surge.sh/#/

Make the window bigger and smaller to force the app to use a bigger than surface canvas.
Click anywhere to download a png of the canvas.

## Analysis

The CanvasKit surface renderer, expects the surface to be drawn in the lower-left corner of the canvas, so it crops the view to that sector.

https://github.com/flutter/engine/blob/ec1be5b9c3c4b51c4d81cb4170563f8078fd01a7/lib/web_ui/lib/src/engine/canvaskit/surface.dart#L216-L229

```dart
  /// Translate the canvas so the surface covers the visible portion of the
  /// screen.
  ///
  /// The <canvas> may be larger than the visible screen, but the SkSurface is
  /// exactly the size of the visible screen. Unfortunately, the SkSurface is
  /// drawn in the lower left corner of the <canvas>, and without translation,
  /// only the top left of the <canvas> is visible. So we shift the canvas up so
  /// the bottom left corner is visible.
  void _translateCanvas() {
    final int surfaceHeight = _currentSurfaceSize!.height.ceil();
    final double offset =
        (_pixelHeight - surfaceHeight) / window.devicePixelRatio;
    htmlCanvas!.style.transform = 'translate(0, -${offset}px)';
  }
```
expected: It should crop the correct place when using CPU, or make both to render on the same portion of canvas.

Related to #77084

<details>
  <summary>Flutter Doctor</summary>

```
[✓] Flutter (Channel master, 3.1.0-0.0.pre.2059, on Ubuntu 22.04 LTS 5.15.0-41-generic, locale en_US.UTF-8)
    • Flutter version 3.1.0-0.0.pre.2059 on channel master at /home/bri/sdk/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 5d52d3103a (25 hours ago), 2022-08-03 11:51:10 -0400
    • Engine revision 51296a62d9
    • Dart version 2.19.0 (build 2.19.0-58.0.dev)
    • DevTools version 2.16.0

[✓] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1)
    • Android SDK at /home/bri/Android/Sdk
    • Platform android-32, build-tools 32.1.0-rc1
    • Java binary at: /home/bri/app/android-studio/jre/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)
    • All Android licenses accepted.

[✓] Chrome - develop for the web
    • Chrome at google-chrome

[✓] Linux toolchain - develop for Linux desktop
    • Ubuntu clang version 14.0.0-1ubuntu1
    • cmake version 3.22.1
    • ninja version 1.10.1
    • pkg-config version 0.29.2

[✓] Android Studio (version 2021.2)
    • Android Studio at /home/bri/app/android-studio
    • 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 11.0.12+0-b1504.28-7817840)

[✓] VS Code (version 1.68.1)
    • VS Code at /usr/share/code
    • Flutter extension version 3.46.0

[✓] Connected device (2 available)
    • Linux (desktop) • linux  • linux-x64      • Ubuntu 22.04 LTS 5.15.0-41-generic
    • Chrome (web)    • chrome • web-javascript • Google Chrome 103.0.5060.53

[✓] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!
```

</details>