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);
    }
  }
}

Remember that is is recommended to regulate the offset with the position field on PositionComponent instead of you start variable, and the size variable can be used to set the end. If you do this you can apply effects properly to the grid afterwards. — spydon, Dec 27 '22 at 14:46

score 0 · Accepted Answer · answered Dec 25 '22 at 20:13

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;
}

Flutter canvas not rendering as expected

1 Answers1