Issue with paths when used with batching

[technyon]

Hi,

I have a strange issue that occurs when drawing paths using batching with MoveToAsync, LineToAsync nad StrokeAsync. As long as I draw a static image, everything is fine, but in my case the user can zoom and pan the content of the canvas. While this works for shapes like rectangles, paths have an issue: Paths from previous renders remain on the canvas, although it has been cleared using ClearRectAsync. Rectangles don't have this problem.

To reproduce:

• Clone the repository
• Open DrawingRectangles.razor
• Replace the content with my modified code below. This code draws rectangles, paths and allows to pan with the mouse
• Start "Canvas_ServerSide"
• Navigate to "Drawing rectangles"
• Move the mouse cursor over the canvas, this will pan the content
• Notice that rectangles move around as expected, but paths don't get cleared up and paths from their previous positions are still drawn

Expected behavior: ClearRectAsync should clear the canvas and only the paths drawn after the last ClearRectAsync are visible

@page "/2D/DrawingRectangles"
@using System.Diagnostics
@using Excubo.Blazor.Canvas.Contexts

<SourceCodeLink Repository="Blazor.Canvas" Section="@nameof(Context2D)" Page="@nameof(DrawingRectangles)" />
<h3>DrawingRectangles</h3>

For more information, please visit <a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D">https://developer.mozilla.org/</a>.
<hr />
<Canvas @ref="canvas" onmousemove="@OnMove" width="400" height="400" style="border: 5px solid red" />
<hr />
<ol>
    @if (Messages != null)
    {
        foreach (var message in Messages)
        {
            <li>@message</li>
        }
    }
</ol>

@code {
    private async Task OnMove(MouseEventArgs e)
    {
        offsetX = offsetX + (int)e.MovementX;
        offsetY = offsetY + (int)e.MovementY;
        await UpdateCanvasAsync();
    }

    private Canvas canvas;
    private Context2D _context;

    private List<string> Messages = new List<string>();
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        await base.OnAfterRenderAsync(firstRender);

        if (firstRender)
        {
            _context = await canvas.GetContext2DAsync();
            await UpdateCanvasAsync();
        }
    }

    private int offsetX = 0;
    private int offsetY = 0;

    private async Task UpdateCanvasAsync()
    {
        var messages = new List<string>();
        await using (var batch = _context.CreateBatch())
        {
            await batch.ClearRectAsync(0, 0, 400, 400);
            await batch.FillRectAsync(offsetX + 100, offsetY + 100, 100, 100);
            await batch.StrokeRectAsync(offsetX + 210, offsetY + 100, 100, 100);
            await batch.StrokeStyleAsync("#000000");
            await batch.MoveToAsync(offsetX + 80, offsetY + 100);
            await batch.LineToAsync(offsetX + 80, offsetY + 100 + 100);
            await batch.StrokeAsync();

        }
    }
}

[technyon]

To answer my own issue, this can be fixed by putting

await batch.BeginPathAsync();

before any calls drawing paths.