Implement Canvas drawPoints API for Html backend

lib/web_ui/dev/goldens_lock.yaml

@@ -1,2 +1,2 @@
 repository: https://github.com/flutter/goldens.git
-revision: 30ef2668489dab3191a5df251330aedb9b0c239a
+revision: 3db2bb2329e7277c34389a92507eacaab774c8e8

lib/web_ui/lib/src/engine/bitmap_canvas.dart

@@ -570,6 +570,25 @@ class BitmapCanvas extends EngineCanvas {
         _canvasPool.currentTransform, vertices, blendMode, paint);
   }
 
+  @override
+  void drawPoints(ui.PointMode pointMode, Float32List points,
+      double strokeWidth, ui.Color color) {
+    ContextStateHandle contextHandle = _canvasPool.contextHandle;
+    contextHandle
+      ..lineWidth = strokeWidth
+      ..blendMode = ui.BlendMode.srcOver
+      ..strokeCap = ui.StrokeCap.round
+      ..strokeJoin = ui.StrokeJoin.round
+      ..filter = '';
+    final String cssColor = colorToCssString(color);
+    if (pointMode == ui.PointMode.points) {
+      contextHandle.fillStyle = cssColor;
+    } else {
+      contextHandle.strokeStyle = cssColor;
+    }
+    _canvasPool.drawPoints(pointMode, points, strokeWidth / 2.0);
+  }
+
   @override
   void endOfPaint() {
     assert(_saveCount == 0);

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

@@ -229,7 +229,8 @@ class _CanvasPool extends _SaveStackTracking {
 
     // This scale makes sure that 1 CSS pixel is translated to the correct
     // number of bitmap pixels.
-    ctx.scale(EngineWindow.browserDevicePixelRatio, EngineWindow.browserDevicePixelRatio);
+    ctx.scale(EngineWindow.browserDevicePixelRatio,
+        EngineWindow.browserDevicePixelRatio);
   }
 
   void resetTransform() {
@@ -397,6 +398,38 @@ class _CanvasPool extends _SaveStackTracking {
     ctx.stroke();
   }
 
+  void drawPoints(ui.PointMode pointMode, Float32List points, double radius) {
+    html.CanvasRenderingContext2D ctx = context;
+    final int len = points.length;
+    switch (pointMode) {
+      case ui.PointMode.points:
+        for (int i = 0; i < len; i += 2) {
+          final double x = points[i];
+          final double y = points[i + 1];
+          ctx.beginPath();
+          ctx.arc(x, y, radius, 0, 2.0 * math.pi);
+          ctx.fill();
+        }
+        break;
+      case ui.PointMode.lines:
+        ctx.beginPath();
+        for (int i = 0; i < (len - 2); i += 4) {
+          ctx.moveTo(points[i], points[i + 1]);
+          ctx.lineTo(points[i + 2], points[i + 3]);
+          ctx.stroke();
+        }
+        break;
+      case ui.PointMode.polygon:
+        ctx.beginPath();
+        ctx.moveTo(points[0], points[1]);
+        for (int i = 2; i < len; i += 2) {
+          ctx.lineTo(points[i], points[i + 1]);
+        }
+        ctx.stroke();
+        break;
+    }
+  }
+
   /// 'Runs' the given [path] by applying all of its commands to the canvas.
   void _runPath(html.CanvasRenderingContext2D ctx, SurfacePath path) {
     ctx.beginPath();

lib/web_ui/lib/src/engine/dom_canvas.dart

@@ -104,8 +104,8 @@ class DomCanvas extends EngineCanvas with SaveElementStackTracking {
       ..transformOrigin = '0 0 0'
       ..transform = effectiveTransform;
 
-    final String cssColor = paint.color == null ? '#000000'
-        : colorToCssString(paint.color);
+    final String cssColor =
+        paint.color == null ? '#000000' : colorToCssString(paint.color);
 
     if (paint.maskFilter != null) {
       style.filter = 'blur(${paint.maskFilter.webOnlySigma}px)';
@@ -181,6 +181,12 @@ class DomCanvas extends EngineCanvas with SaveElementStackTracking {
     throw UnimplementedError();
   }
 
+  @override
+  void drawPoints(ui.PointMode pointMode, Float32List points,
+      double strokeWidth, ui.Color color) {
+    throw UnimplementedError();
+  }
+
   @override
   void endOfPaint() {
     // No reuse of elements yet to handle here. Noop.

lib/web_ui/lib/src/engine/engine_canvas.dart

@@ -69,6 +69,9 @@ abstract class EngineCanvas {
   void drawVertices(
       ui.Vertices vertices, ui.BlendMode blendMode, SurfacePaintData paint);
 
+  void drawPoints(ui.PointMode pointMode, Float32List points,
+      double strokeWidth, ui.Color color);
+
   /// Extension of Canvas API to mark the end of a stream of painting commands
   /// to enable re-use/dispose optimizations.
   void endOfPaint();

lib/web_ui/lib/src/engine/houdini_canvas.dart

@@ -234,6 +234,12 @@ class HoudiniCanvas extends EngineCanvas with SaveElementStackTracking {
     // TODO(flutter_web): implement.
   }
 
+  @override
+  void drawPoints(ui.PointMode pointMode, Float32List points,
+      double strokeWidth, ui.Color color) {
+    // TODO(flutter_web): implement.
+  }
+
   @override
   void endOfPaint() {}
 }