Canvas does not draw with multiple async events waited on via Task.WhenAll

[CornCobs]

Blazor version: Blazor Server

I wish to create multiple drawing Task which I wait for all at once with Task.WhenAll like this:

    private async Task DrawStart((int X, int Y) centroid, IEnumerable<(int X, int Y, int Ix)> startPoints)
    {
        await _context.TranslateAsync(centroid.X, centroid.Y);
        await _context.SetFillStyleAsync("blue");
        await _context.FillRectAsync(centroid.X, centroid.Y, 10, 10);
        await _context.SetFillStyleAsync("green");

        // This only draws 1 green rect
        // var drawStartTasks = startPoints.Select(pt =>
        //     _context.FillRectAsync(pt.X, pt.Y, 5, 5));
        // await Task.WhenAll(drawStartTasks);

        // This draws all start points correctly
        foreach (var pt in startPoints)
        {
            await _context.FillRectAsync(pt.X, pt.Y, 5, 5);
        }
    }

Desired output (correctly given by the foreach loop):

Output with Task.WhenAll:

Adding a .ContinueWith(_ => Console.WriteLine($"Drew point {pt}")) to each task, it appears each Task does complete successfully. Thus I assume the problem is with the canvas and not Blazor.

[mizrael]

Blazor is (still) single-threaded, there's no support yet for UI-side async operations.

On Tue., May 25, 2021, 5:29 a.m. CornCobs, @.***> wrote:

Blazor version: Blazor Server

I wish to create multiple drawing Task which I wait for all at once with Task.WhenAll like this:

private async Task DrawStart((int X, int Y) centroid, IEnumerable<(int X, int Y, int Ix)> startPoints)
{
    await _context.TranslateAsync(centroid.X, centroid.Y);
    await _context.SetFillStyleAsync("blue");
    await _context.FillRectAsync(centroid.X, centroid.Y, 10, 10);
    await _context.SetFillStyleAsync("green");

    // This only draws 1 green rect
    // var drawStartTasks = startPoints.Select(pt =>
    //     _context.FillRectAsync(pt.X, pt.Y, 5, 5));
    // await Task.WhenAll(drawStartTasks);

    // This draws all start points correctly
    foreach (var pt in startPoints)
    {
        await _context.FillRectAsync(pt.X, pt.Y, 5, 5);
    }
}

Desired output (correctly given by the foreach loop):

[image: image] https://user-images.githubusercontent.com/28252911/119473800-17566900-bd7e-11eb-8889-34f5c2170c53.png

Output with Task.WhenAll:

[image: image] https://user-images.githubusercontent.com/28252911/119473983-4967cb00-bd7e-11eb-9bb4-a44834c7012f.png

Adding a .ContinueWith(_ => Console.WriteLine($"Drew point {pt}")) to each task, it appears each Task does complete successfully. Thus I assume the problem is with the canvas and not Blazor.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/BlazorExtensions/Canvas/issues/110, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAK52KCJCGDGG53TDM6ZPN3TPNUX7ANCNFSM45O5WN3A .

[RChrisCoble]

He called out "Blazor Server" in his original post. If he was using client the WaitAll() on Blazor client it would have hung completely.

[mizrael]

I missed the "Server" part in the original message, apologies.

However, since the code is running on the HTML canvas, I still suspect it's not doing back/forth with the server and it's trying to run all those tasks on the client instead.