Support custom graphics from Blazor components across all hosting models

[danroth27]

We've seen user requests to support custom graphics in Blazor components that can be reused across all Blazor hosting models: Server, WebAssembly, Hybrid. For example: mono/SkiaSharp#1834

SkiaSharp provides some level of custom graphics support for Blazor WebAssembly apps, but additional work is required to support Server and Hybrid scenarios where the canvas memory is not directly accessible.

Microsoft.Maui.Graphics provides a common graphics abstraction for .NET MAUI apps. It supports using a skia-based backend when can also work in Blazor WebAssembly apps: https://github.com/jonlipsky/MauiGraphics.Sample.Blazor.WebAssembly. But again, no support for Server or Hybrid.

Various community projects existing for interacting with the HTML canvas API: https://github.com/excubo-ag/Blazor.Canvas, https://github.com/BlazorExtensions/Canvas.

To support Blazor Server and Blazor Hybrid we need to decide on a mechanism to transfer the graphics commands to the browser and then handle them. See mono/SkiaSharp#1834 (comment) for some options.

[RChrisCoble]

Thanks for this nice writeup @danroth27. I know @jonlipsky mentioned in an email conversation he already had code to serialize and deserialize drawing commands with a binary format for MAUI.Graphics which might be helpful if that behavior is ever committed.

[danroth27]

Related Microsoft.Maui.Graphics issues:

• Blazor WebAssembly support for Microsoft.Maui.Graphics Microsoft.Maui.Graphics#243
• Blazor Server support for Microsoft.Maui.Graphics Microsoft.Maui.Graphics#244
• Blazor Hybrid support for Microsoft.Maui.Graphics Microsoft.Maui.Graphics#245

[RChrisCoble]

@danroth27 has communicated this will not reach the priority level for .NET 8. The P3 tag aligns against that decision. Thanks for the update.

[ghost]

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.

[sulivanganter]

Many great projects require this to function in a Server or Hybrid environment. I hope that one day this will be moved out of the backlog

[xcaptain]

Any progress? I found an awesome project(https://github.com/DominikNITA/Blazor3D-Playground) using canvas to draw 3D graphics, hope one day we can use canvas directly in blazor app without adding https://github.com/BlazorExtensions/Canvas.

[RChrisCoble]

We ended up using SkiaSharp to do our 2D rendering on WASM and this has been extremely successful for us, and fast.

The only gotcha is this rendering bypasses the JS/Interop layer so it will not work in "Blazor Hybrid" scenarios.

[sulivanganter]

Indeed, rendering in WASM is fast. Libraries for generating charts such as ScottPlot5 and LiveCharts2 use SkiaSharp and are available for Blazor only in WASM. I know with .NET 8, I can keep some components on client-side. The problem is that you need to send all the data to the client to perform the rendering, instead of just sending the rendered output and events. When dealing with a larger amount of data, this makes everything slow. Additionally, it is not possible to reuse the code in Blazor Hybrid because there is no option to run a component on the "client" side.