Improving performance of the Draw calls of MAUI GraphicsView

Question

I'm writing a handwriting app in MAUI using DrawingView from the communityToolKit. Below is the sample code of how I'm creating the DrawingView

public MainPage()
{
    InitializeComponent();

    Content = new DrawingView
    {
        Lines = new ObservableCollection<IDrawingLine>(),
        LineColor = Colors.Red,
        LineWidth = 5,
        IsMultiLineModeEnabled = true,

    };
}

This code runs perfectly fine on windows machine but when executed on the android device or emulator, the app starts lagging after drawing a few lines. To be specific, the lag between registering consecutive points increases.

I started looking at the code of community toolkit to figure out what is happening and I found out that

1. canvas draws all the lines every time a new point is registered.
2. The Draw method of IDrawable is called by internal library when the Invalidate() is called on the GraphicsView.
3. Canvas also has State but it is only storing Stroke properties and not the actual lines.

The draw call code of DrawingView from community toolkit. The call DrawCurrentLines(canvas, drawingView); draws all the lines every time an input is registered.

class DrawingViewDrawable : IDrawable
{
    readonly MauiDrawingView drawingView;
    Stopwatch watch = new();

    public DrawingViewDrawable(MauiDrawingView drawingView)
    {
        this.drawingView = drawingView;
    }

    public void Draw(ICanvas canvas, RectF dirtyRect)
    {
        canvas.SetFillPaint(drawingView.Paint, dirtyRect);
        canvas.FillRectangle(dirtyRect);

        drawingView.DrawAction?.Invoke(canvas, dirtyRect);
        DrawCurrentLines(canvas, drawingView);

        SetStroke(canvas, drawingView.LineWidth, drawingView.LineColor);
        canvas.DrawPath(drawingView.currentPath);
    }
}

I'm not able to figure out how to improve performance of this Draw call. How can I avoid redrawing all the lines every time. Or I should check some other package?

Edit 1: Adding library versions and video showing the issue

I'm using CommunityToolkit.Maui 7.0.1 .NET 8 emulator: Pixel 5 - API 34

Video Showing Issue Shows the issue. It is specially visible in the last circle which is drawn. Note that while the circle is being drawn, there is significant lag between where the mouse pointer and the line. But more important is the time delay between recording mouse input. That makes the line very jagged. This video is from the sample code which I'm using to debug performance issue.

Recording on Android Device of the app. This recording is of the app that I'm building and it's running on Samsung Tab S6 FE. The drop in performance is visible and it keeps degrading the more strokes a user makes.

Edit 2: Optimizing the draw calls and inviting new problems

Repo with the code: https://github.com/Pbasnal/todoecs/tree/main/DrawingViewPerf

I have made a few changes to the code and updated the repo with 3 different implementations.

1. The first implementation uses the default DrawingView and experiences performance degradation.
2. The second implementation uses an Image on which we bake the line and use it as a cache. This way, we don't have to draw all the lines every time. This implementation is experiencing a few problems.
   • Alignment issue: the generated image doesn't align with the DrawingView canvas.
   • We need to create border lines, so the entire canvas is captured otherwise only the bounding box of the drawn line is captured.
   • Every time the image is updated, the screen flickers.
3. The third implementation adjusts the points of the border lines using the line width. By doing this, the generated image aligns perfectly with the drawing view canvas. But it still has 2 problems.
   • Every time the image is updated, the screen flickers.
   • The line which gets rendered on the image has a different texture than the line which is drawn by the drawing view.

I'm still trying to figure out the solution for screen flickering as that's more important. Let me know you can help with the screen flicker.

Important note: The screen flickering problem majorly occurs on the emulator and the android device.