[web] Fixes IE11 crash due to missing canvas ellipse support and font polyfill failure (#16965)

* Add context ellipse polyfill
* Change call sites for ellipse
* Switch fontloader polyfill font for ie11

lib/web_ui/lib/src/engine/canvas_pool.dart

@@ -503,7 +503,7 @@ class _CanvasPool extends _SaveStackTracking {
             break;
           case PathCommandTypes.ellipse:
             final Ellipse ellipse = command;
-            ctx.ellipse(
+            DomRenderer.ellipse(ctx,
                 ellipse.x,
                 ellipse.y,
                 ellipse.radiusX,
@@ -563,14 +563,14 @@ class _CanvasPool extends _SaveStackTracking {
 
   void drawOval(ui.Rect rect, ui.PaintingStyle style) {
     context.beginPath();
-    context.ellipse(rect.center.dx, rect.center.dy, rect.width / 2,
+    DomRenderer.ellipse(context, rect.center.dx, rect.center.dy, rect.width / 2,
         rect.height / 2, 0, 0, 2.0 * math.pi, false);
     contextHandle.paint(style);
   }
 
   void drawCircle(ui.Offset c, double radius, ui.PaintingStyle style) {
     context.beginPath();
-    context.ellipse(c.dx, c.dy, radius, radius, 0, 0, 2.0 * math.pi, false);
+    DomRenderer.ellipse(context, c.dx, c.dy, radius, radius, 0, 0, 2.0 * math.pi, false);
     contextHandle.paint(style);
   }
 

lib/web_ui/lib/src/engine/dom_renderer.dart

@@ -489,6 +489,26 @@ flt-glass-pane * {
     }
   }
 
+  static bool _ellipseFeatureDetected;
+
+  /// Draws CanvasElement ellipse with fallback.
+  static void ellipse(html.CanvasRenderingContext2D context,
+      double centerX, double centerY, double radiusX, double radiusY,
+      double rotation, double startAngle, double endAngle, bool antiClockwise) {
+    _ellipseFeatureDetected ??= js_util.getProperty(context, 'ellipse') != null;
+    if (_ellipseFeatureDetected) {
+      context.ellipse(centerX, centerY, radiusX, radiusY,
+          rotation, startAngle, endAngle, antiClockwise);
+    } else {
+      context.save();
+      context.translate(centerX, centerY);
+      context.rotate(rotation);
+      context.scale(radiusX, radiusY);
+      context.arc(0, 0, 1, startAngle, endAngle, antiClockwise);
+      context.restore();
+    }
+  }
+
   /// The element corresponding to the only child of the root surface.
   html.Element get _rootApplicationElement {
     final html.Element lastElement = rootElement.children.last;

lib/web_ui/lib/src/engine/rrect_renderer.dart

@@ -196,7 +196,7 @@ class _RRectToCanvasRenderer extends _RRectRenderer {
 
   void ellipse(double centerX, double centerY, double radiusX, double radiusY,
       double rotation, double startAngle, double endAngle, bool antiClockwise) {
-    context.ellipse(centerX, centerY, radiusX, radiusY, rotation, startAngle,
+    DomRenderer.ellipse(context, centerX, centerY, radiusX, radiusY, rotation, startAngle,
         endAngle, antiClockwise);
   }
 }

lib/web_ui/lib/src/engine/text/font_collection.dart

@@ -245,7 +245,9 @@ class _PolyfillFontManager extends FontManager {
     paragraph.style.position = 'absolute';
     paragraph.style.visibility = 'hidden';
     paragraph.style.fontSize = '72px';
-    paragraph.style.fontFamily = 'sans-serif';
+    final String fallbackFontName = browserEngine == BrowserEngine.ie11 ?
+      'Times New Roman' : 'sans-serif';
+    paragraph.style.fontFamily = fallbackFontName;
     if (descriptors['style'] != null) {
       paragraph.style.fontStyle = descriptors['style'];
     }
@@ -257,7 +259,7 @@ class _PolyfillFontManager extends FontManager {
     html.document.body.append(paragraph);
     final int sansSerifWidth = paragraph.offsetWidth;
 
-    paragraph.style.fontFamily = "'$family', sans-serif";
+    paragraph.style.fontFamily = "'$family', $fallbackFontName";
 
     final Completer<void> completer = Completer<void>();
 
@@ -269,8 +271,10 @@ class _PolyfillFontManager extends FontManager {
         completer.complete();
       } else {
         if (DateTime.now().difference(_fontLoadStart) > _fontLoadTimeout) {
-          completer.completeError(
-              Exception('Timed out trying to load font: $family'));
+          // Let application waiting for fonts continue with fallback.
+          completer.complete();
+          // Throw unhandled exception for logging.
+          throw Exception('Timed out trying to load font: $family');
         } else {
           Timer(_fontLoadRetryDuration, _watchWidth);
         }