'How do I draw synchronously using the Blazor.Extensions.Canvas package?

I'm using the Blazor.Extensions.Canvas package in an ASP.NET Core hosted WebAssembly app.

The method below works fine in a Blazor server app and in a Blazor static WebAssembly app. However, the ASP.NET Core hosted version does a lot of misdrawing - wrong colours and wrong point-to-point paths.

It seems that the various drawing statements are interfering with each other.
As the synchronous version of these methods are deprecated, how do I get the drawing done correctly?

    private async Task DrawPointAndCheckers(Int32 Point, Int32 Checkers, Int32 PreviousCheckers)
    {
        if (Context == null)
            return;
        Int32 pointX = -1, pointY = -1, checkerCt = Math.Abs(Checkers), checkerX = -1;
        Int32 checkerBaseY = -1, checkerDirectionY = 0;

        switch (Point)...
        // Point
        if (Math.Abs(Checkers) < Math.Abs(PreviousCheckers) || isFirstTime)
        {
            await Context.SetFillStyleAsync(clrBackground);
            await Context.FillRectAsync(pointX, checkerDirectionY == 1 ? pointY : pointY - pointHeight, pointWidth, pointHeight);
            if (Math.Abs(PreviousCheckers) > 5)
                await Context.FillRectAsync(checkerX, checkerBaseY + 6 * checkerHeight * checkerDirectionY, checkerWidth, checkerHeight);
            PreviousCheckers = 0;
            await Context.SetFillStyleAsync(Point % 2 == 0 ? clrEvenPoint : clrOddPoint);
            await Context.BeginPathAsync();
            await Context.MoveToAsync(pointX, pointY);
            await Context.LineToAsync(pointX + pointWidth / 2, pointY + checkerDirectionY * pointHeight);
            await Context.LineToAsync(pointX + pointWidth, pointY);
            await Context.ClosePathAsync();
            await Context.FillAsync();
        }
        // Checkers
        for (Int32 man = Math.Abs(PreviousCheckers) + 1; man <= checkerCt; man++)
        {
            Int32 checkerY = checkerBaseY + man * checkerHeight * checkerDirectionY;
            await DrawEllipse(checkerX, checkerY, checkerWidth, checkerHeight, Checkers > 0 ? clrOnrollCheckers : clrOpponentCheckers, true);
            if (man == 6)
            {
                await DrawText(checkerX, checkerY, checkerWidth, checkerHeight, clrCheckerCtText, true, checkerCt.ToString());
                break;
            }
        }
    }


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source