CommunityToolkit / CommunityToolkit/Maui

[BUG] Performance DrawingView degrades with number of lines on the screen

Open
#1,722 9 comments 0 reactions 0 assignees View on GitHub
area/views bug unverified
Dominant language
C#
Stars
2.7k
Forks
500
Avg merge
2d 14h
Merged PRs (30d)
7

Description

### Is there an existing issue for this?

- [X] I have searched the existing issues

### Did you read the "Reporting a bug" section on Contributing file?

- [X] I have read the "Reporting a bug" section on Contributing file: https://github.com/CommunityToolkit/Maui/blob/main/CONTRIBUTING.md#reporting-a-bug

### Current Behavior

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

```
public MainPage()
{
InitializeComponent();

Content = new DrawingView
{
Lines = new ObservableCollection(),
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 as the number of lines increases. To be specific, the lag between registering consecutive points increases making the lines look jagged instead of smooth.

I started looking at the code of community toolkit to figure out what is happening and I found out that
the DrawingView draws all the lines every time a new point is registered.
The code that I feel is causing the issue:
```
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 using
CommunityToolkit.Maui 7.0.1
.NET 8
emulator: Pixel 5 - API 34

Also ran on Samsung Tab S6 FE

[Video Showing Issue](https://imgur.com/a/Bug8j2a) Shows the issue. It is especially 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 is and the last point of line is. 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](https://imgur.com/a/xOd5MBk). 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 as the number of lines increases.

### Expected Behavior

The performance of the DrawingView should stay consistent even if the number of lines increases.
Performance here means, the time delay between capturing mouse movement and latency of drawing the line which is being drawn by the user.
I believe, we can use an image for this. When user lifts the pointer up, then DrawingView should bake that line on to an image and then just display that image instead of drawing all the lines every time.

### Steps To Reproduce

1. Clone the repo: https://github.com/Pbasnal/todoecs
2. Go to the folder [DrawingViewPerf](https://github.com/Pbasnal/todoecs/tree/main/DrawingViewPerf). This contains the sample code.
3. Open the solution in visual studio and run the app on Pixel emulator api 34.
4. It can take a while for the issue to occur so draw a lot of lines, the performance will drop eventually.

### Link to public reproduction project repository

https://github.com/Pbasnal/todoecs/tree/main/DrawingViewPerf

### Environment

```markdown
- .NET MAUI CommunityToolkit: 7.0.1
- OS: Windows 11 Home Single Language 23H2 22631.3155
- .NET MAUI: 7.0.1
- .NET 8
```

### Anything else?

_No response_

Contributor guide

Open the contributing guide

Research direction

Start with the DrawingView and DrawingViewDrawable.Draw code shown in the issue, then run the DrawingViewPerf reproduction on a Pixel emulator using the reported environment. Profile drawing as lines accumulate and compare latency while adding points. Done means drawing performance remains consistent as the number of completed lines increases, especially on Android.

Written by the indexing model from the issue text.

Assessment

Tech stack
csharp
Domain
mobile, performance
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.