Flutter canvas not rendering as expected

Question

I am trying to render a grid with flutter canvas with Canvas.drawLine method.

Some lines are rendered semi-transparent and some are not even being rendered on the canvas.

class Background extends PositionComponent with HasGameRef<RokokoGame>{

  Offset start = Offset.zero;
  Offset end = Offset.zero;

  // will be different across devices
  late final double canvasX;
  late final double canvasY;

  final int cellSize = GameConfig.cellSize;


  Background(this.canvasX, this.canvasY);

  @override
  Future<void>? onLoad() {
    start = Offset(0, 0);
    end = Offset(this.canvasX, this.canvasY);
  }

  @override
  void render(Canvas canvas) {
    canvas.drawRect(Rect.fromPoints(Offset.zero, end), Styles.white);
    _drawVerticalLines(canvas);
    _drawHorizontalLines(canvas);
  }

  void _drawVerticalLines(Canvas c) {
    for (double x = start.dx; x <= end.dx; x += cellSize) {
      c.drawLine(Offset(x, start.dy), Offset(x, end.dy), Styles.red);
    }
  }

  void _drawHorizontalLines(Canvas c) {
    for (double y = start.dy; y <= end.dy; y += cellSize) {
      c.drawLine(Offset(start.dx, y), Offset(end.dx, y), Styles.blue);
    }
  }
}

Answer 1

So, i was able to solve the issue by applying some stroke width in my Styles class.

class Styles {
  static Paint white = BasicPalette.white.paint();
  static Paint blue = BasicPalette.blue.paint()..strokeWidth = 3;
  static Paint red = BasicPalette.red.paint()..strokeWidth = 3;
}