[web] Fix drawPoints api crash when strokeWidth is not specified. (#23773)

lib/web_ui/dev/goldens_lock.yaml

 repository: https://github.com/flutter/goldens.git
-revision: 510c545ee4dd94f7d620cdc51a9027fdd8e521bc
+revision: 999507db8c924635a605325252702bad661e2ad2

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

@@ -951,11 +951,16 @@ class BitmapCanvas extends EngineCanvas {
       _drawPointsPaint.style = ui.PaintingStyle.fill;
     }
     _drawPointsPaint.color = paint.color;
-    _drawPointsPaint.strokeWidth = paint.strokeWidth;
     _drawPointsPaint.maskFilter = paint.maskFilter;
 
+    final double dpr = ui.window.devicePixelRatio;
+    // Use hairline (device pixel when strokeWidth is not specified).
+    final double strokeWidth = paint.strokeWidth == null ? 1.0 / dpr
+        : paint.strokeWidth!;
+    _drawPointsPaint.strokeWidth = strokeWidth;
     _setUpPaint(_drawPointsPaint, null);
-    _canvasPool.drawPoints(pointMode, points, paint.strokeWidth! / 2.0);
+    // Draw point using circle with half radius.
+    _canvasPool.drawPoints(pointMode, points, strokeWidth / 2.0);
     _tearDownPaint();
   }
 

lib/web_ui/test/golden_tests/engine/canvas_draw_points_test.dart

@@ -59,4 +59,25 @@ void testMain() async {
     html.document.body.append(canvas.rootElement);
     await matchGoldenFile('canvas_draw_points.png', region: region);
   });
+
+  test('Should draw points with strokeWidth', () async {
+    final SurfacePaintData nullStrokePaint =
+      SurfacePaintData()..color = Color(0xffff0000);
+    canvas.drawPoints(PointMode.lines, Float32List.fromList([
+      30.0, 20.0, 200.0, 20.0]), nullStrokePaint);
+    final SurfacePaintData strokePaint1 = SurfacePaintData()
+      ..strokeWidth = 1.0
+      ..color = Color(0xff0000ff);
+    canvas.drawPoints(PointMode.lines, Float32List.fromList([
+      30.0, 30.0, 200.0, 30.0]), strokePaint1);
+    final SurfacePaintData strokePaint3 = SurfacePaintData()
+      ..strokeWidth = 3.0
+      ..color = Color(0xff00a000);
+    canvas.drawPoints(PointMode.lines, Float32List.fromList([
+      30.0, 40.0, 200.0, 40.0]), strokePaint3);
+    canvas.drawPoints(PointMode.points, Float32List.fromList([
+      30.0, 50.0, 40.0, 50.0, 50.0, 50.0]), strokePaint3);
+    html.document.body.append(canvas.rootElement);
+    await matchGoldenFile('canvas_draw_points_stroke.png', region: region);
+  });
 }