feat: Add showBackground and backgroundColor attributes

Enables giving a character a solid background in a different color.
This prevents clutter when the character is drawn
on top of a background with guides or other elements.

lib/src/stroke_order_animation_controller.dart

@@ -43,11 +43,13 @@ class StrokeOrderAnimationController extends ChangeNotifier {
   /// * Animation speed of stroke animations and hints in quiz mode (try 3 and adjust from there)
   /// * Whether to show/hide strokes
   /// * Whether to show/hide outlines
+  /// * Whether to show/hide backgrounds for the strokes
   /// * Whether to show/hide medians
   /// * Whether to show/hide the correct strokes the user writes during a quiz
   /// * Whether to highlight radicals
   /// * Stroke color
   /// * Outline color
+  /// * Background color (of the strokes, not the whole widget)
   /// * Median color
   /// * Radical color
   /// * Brush color in quiz mode
@@ -61,11 +63,13 @@ class StrokeOrderAnimationController extends ChangeNotifier {
     double hintAnimationSpeed = 3,
     bool showStroke = true,
     bool showOutline = true,
+    bool showBackground = false,
     bool showMedian = false,
     bool showUserStroke = false,
     bool highlightRadical = false,
     Color strokeColor = Colors.blue,
     Color outlineColor = Colors.black,
+    Color backgroundColor = Colors.grey,
     Color medianColor = Colors.black,
     Color radicalColor = Colors.red,
     Color brushColor = Colors.black,
@@ -80,10 +84,12 @@ class StrokeOrderAnimationController extends ChangeNotifier {
   })  : _strokeColor = strokeColor,
         _showStroke = showStroke,
         _showOutline = showOutline,
+        _showBackground = showBackground,
         _showMedian = showMedian,
         _showUserStroke = showUserStroke,
         _highlightRadical = highlightRadical,
         _outlineColor = outlineColor,
+        _backgroundColor = backgroundColor,
         _medianColor = medianColor,
         _radicalColor = radicalColor,
         _brushColor = brushColor,
@@ -155,25 +161,29 @@ class StrokeOrderAnimationController extends ChangeNotifier {
 
   bool _showStroke;
   bool _showOutline;
+  bool _showBackground;
   bool _showMedian;
   bool _showUserStroke;
   bool _highlightRadical;
 
   bool get showStroke => _showStroke;
   bool get showOutline => _showOutline;
+  bool get showBackground => _showBackground;
   bool get showMedian => _showMedian;
   bool get showUserStroke => _showUserStroke;
   bool get highlightRadical => _highlightRadical;
 
   Color _strokeColor;
   Color _outlineColor;
+  Color _backgroundColor;
   Color _medianColor;
   Color _radicalColor;
   Color _brushColor;
   Color _hintColor;
 
   Color get strokeColor => _strokeColor;
   Color get outlineColor => _outlineColor;
+  Color get backgroundColor => _backgroundColor;
   Color get medianColor => _medianColor;
   Color get radicalColor => _radicalColor;
   Color get brushColor => _brushColor;
@@ -324,6 +334,11 @@ class StrokeOrderAnimationController extends ChangeNotifier {
     notifyListeners();
   }
 
+  void setShowBackground(bool value) {
+    _showBackground = value;
+    notifyListeners();
+  }
+
   void setShowMedian(bool value) {
     _showMedian = value;
     notifyListeners();
@@ -344,6 +359,11 @@ class StrokeOrderAnimationController extends ChangeNotifier {
     notifyListeners();
   }
 
+  void setBackgroundColor(Color value) {
+    _backgroundColor = value;
+    notifyListeners();
+  }
+
   void setMedianColor(Color value) {
     _medianColor = value;
     notifyListeners();

lib/src/stroke_order_animator.dart

@@ -105,6 +105,8 @@ class StrokeOrderAnimatorState extends State<StrokeOrderAnimator> {
                   showOutline: widget._controller.showOutline,
                   outlineColor: widget._controller.outlineColor,
                   outlineWidth: widget._controller.outlineWidth,
+                  showBackground: widget._controller.showBackground,
+                  backgroundColor: widget._controller.backgroundColor,
                   showMedian: widget._controller.showMedian,
                   medianColor: widget._controller.medianColor,
                   medianWidth: widget._controller.medianWidth,
@@ -162,17 +164,19 @@ class StrokeOrderAnimatorState extends State<StrokeOrderAnimator> {
 class StrokePainter extends CustomPainter {
   StrokePainter(
     this.strokeOutlinePath, {
-    this.showStroke = true,
-    this.strokeColor = Colors.grey,
-    this.showOutline = false,
-    this.outlineColor = Colors.black,
-    this.outlineWidth = 2.0,
-    this.showMedian = false,
-    this.medianColor = Colors.black,
-    this.medianWidth = 2.0,
-    this.animate = false,
-    this.animation,
-    this.median = const [],
+    required this.showStroke,
+    required this.strokeColor,
+    required this.showBackground,
+    required this.backgroundColor,
+    required this.showOutline,
+    required this.outlineColor,
+    required this.outlineWidth,
+    required this.showMedian,
+    required this.medianColor,
+    required this.medianWidth,
+    required this.animate,
+    required this.animation,
+    required this.median,
   }) : super(repaint: animation);
   // If the stroke should be animated, an animation and the median have to be provided
   final bool animate;
@@ -181,6 +185,8 @@ class StrokePainter extends CustomPainter {
   final Color strokeColor;
   final Color outlineColor;
   final double outlineWidth;
+  final bool showBackground;
+  final Color backgroundColor;
   final Color medianColor;
   final double medianWidth;
   final bool showOutline;
@@ -195,6 +201,17 @@ class StrokePainter extends CustomPainter {
 
   @override
   void paint(Canvas canvas, Size size) {
+    if (showBackground) {
+      final backgroundPaint = Paint()
+        ..color = backgroundColor
+        ..style = PaintingStyle.fill;
+
+      canvas.drawPath(
+        _scalePath(strokeOutlinePath, size),
+        backgroundPaint,
+      );
+    }
+
     if (strokeStart < 0) {
       // Calculate the points on strokeOutlinePath that are closest to the start and end points of the median
       strokeStart = getClosestPointOnPathAsDistanceOnPath(