Blazor.Extensions.Canvas 0.4.0

The ID prefix of this package has been reserved for one of the owners of this package by NuGet.org. Prefix Reserved
There is a newer version of this package available.
See the version list below for details.
dotnet add package Blazor.Extensions.Canvas --version 0.4.0
NuGet\Install-Package Blazor.Extensions.Canvas -Version 0.4.0
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package.
<PackageReference Include="Blazor.Extensions.Canvas" Version="0.4.0" />
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add Blazor.Extensions.Canvas --version 0.4.0
#r "nuget: Blazor.Extensions.Canvas, 0.4.0"
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package.
// Install Blazor.Extensions.Canvas as a Cake Addin
#addin nuget:?package=Blazor.Extensions.Canvas&version=0.4.0

// Install Blazor.Extensions.Canvas as a Cake Tool
#tool nuget:?package=Blazor.Extensions.Canvas&version=0.4.0

Usage

On your _ViewImports.cshtml add the using and TagHelper entries:

@using Blazor.Extensions.Canvas
@addTagHelper *, Blazor.Extensions.Canvas

On your .cshtml add a BECanvas and make sure you set the ref to a field on your component:

<BECanvas ref="@_canvasReference"></BECanvas>

2D

On your component C# code (regardless if inline on .razor or in a .cs file), from a BECanvasComponent reference, create a Canvas2DContext, and then use the context methods to draw on the canvas:

private Canvas2DContext _context;

protected BECanvasComponent _canvasReference;

protected override async Task OnAfterRenderAsync()
{
    this._context = await this._canvasReference.CreateCanvas2DAsync();
    await this._context.SetFillStyleAsync("green");

    await this._context.FillRectAsync(10, 100, 100, 100);

    await this._context.SetFontAsync("48px serif");
    await this._context.StrokeTextAsync("Hello Blazor!!!", 10, 100);
}

NOTE You cannot call CreateCanvas2DAsync in OnInitAsync, because the underlying <canvas> element is not yet present in the generated markup.

WebGL

On your component C# code (regardless if inline on .razor or in a .cs file), from a BECanvasComponent reference, create a WebGLContext, and then use the context methods to draw on the canvas:

private WebGLContext _context;

protected BECanvasComponent _canvasReference;

protected override async Task OnAfterRenderAsync()
{
    this._context = await this._canvasReference.CreateWebGLAsync();
    
    await this._context.ClearColorAsync(0, 0, 0, 1);
    await this._context.ClearAsync(BufferBits.COLOR_BUFFER_BIT);
}

NOTE You cannot call CreateWebGLAsync in OnInitAsync, because the underlying <canvas> element is not yet present in the generated markup.

Call Batching

All javascript interop are batched as needed to improve performance. In high-performance scenarios this behavior will not have any effect: each call will execute immediately. In low-performance scenarios, consective calls to canvas APIs will be queued. JavaScript interop calls will be made with each batch of queued commands sequentially, to avoid the performance impact of multiple concurrent interop calls.

When using server-side Razor Components, because of the server-side rendering mechanism, only the last drawing operation executed will appear to render on the client, overwriting all previous operations. In the example code above, for example, drawing the triangles would appear to "erase" the black background drawn immediately before, leaving the canvas transparent.

To avoid this issue, all WebGL drawing operations should be explicitly preceded and followed by BeginBatchAsync and EndBatchAsync calls.

For example:

await this._context.ClearColorAsync(0, 0, 0, 1); // this call does not draw anything, so it does not need to be included in the explicit batch

await this._context.BeginBatchAsync(); // begin the explicit batch

await this._context.ClearAsync(BufferBits.COLOR_BUFFER_BIT);
await this._context.DrawArraysAsync(Primitive.TRIANGLES, 0, 3);

await this._context.EndBatchAsync(); // execute all currently batched calls

It is best to structure your code so that BeginBatchAsync and EndBatchAsync surround as few calls as possible. That will allow the automatic batching behavior to send calls in the most efficient manner possible, and avoid unnecessary performance impacts.

Methods which return values are never batched. Such methods may be called at any time, even after calling BeginBatchAsync, without interrupting the batching of other calls.

NOTE The "overwriting" behavior of server-side code is unpredictable, and shouldn't be relied on as a feature. In low-performance situations calls can be batched automatically, even when you don't explicitly use BeginBatchAsync and EndBatchAsync.

Contributions and feedback

Please feel free to use the component, open issues, fix bugs or provide feedback.

Contributors

The following people are the maintainers of the Blazor Extensions projects:

Product Compatible and additional computed target framework versions.
.NET net5.0 was computed.  net5.0-windows was computed.  net6.0 was computed.  net6.0-android was computed.  net6.0-ios was computed.  net6.0-maccatalyst was computed.  net6.0-macos was computed.  net6.0-tvos was computed.  net6.0-windows was computed.  net7.0 was computed.  net7.0-android was computed.  net7.0-ios was computed.  net7.0-maccatalyst was computed.  net7.0-macos was computed.  net7.0-tvos was computed.  net7.0-windows was computed.  net8.0 was computed.  net8.0-android was computed.  net8.0-browser was computed.  net8.0-ios was computed.  net8.0-maccatalyst was computed.  net8.0-macos was computed.  net8.0-tvos was computed.  net8.0-windows was computed. 
.NET Core netcoreapp2.0 was computed.  netcoreapp2.1 was computed.  netcoreapp2.2 was computed.  netcoreapp3.0 was computed.  netcoreapp3.1 was computed. 
.NET Standard netstandard2.0 is compatible.  netstandard2.1 was computed. 
.NET Framework net461 was computed.  net462 was computed.  net463 was computed.  net47 was computed.  net471 was computed.  net472 was computed.  net48 was computed.  net481 was computed. 
MonoAndroid monoandroid was computed. 
MonoMac monomac was computed. 
MonoTouch monotouch was computed. 
Tizen tizen40 was computed.  tizen60 was computed. 
Xamarin.iOS xamarinios was computed. 
Xamarin.Mac xamarinmac was computed. 
Xamarin.TVOS xamarintvos was computed. 
Xamarin.WatchOS xamarinwatchos was computed. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

NuGet packages (10)

Showing the top 5 NuGet packages that depend on Blazor.Extensions.Canvas:

Package Downloads
FenixAlliance.ACL.Dependencies

Application Component for the Alliance Business Suite.

MComponents

Another blazor component library

Asmodat.Standard

Multipurpose .NET Standard Extensions

ApprenticeFoundryBlazor

2D and 3D graphics for blazor applications

FoundryBlazor

Package Description

GitHub repositories (6)

Showing the top 5 popular GitHub repositories that depend on Blazor.Extensions.Canvas:

Repository Stars
ArduPilot/MissionPlanner
Mission Planner Ground Control Station for ArduPilot (c# .net)
swharden/Csharp-Data-Visualization
Resources for visualizing data using C# and the .NET platform
BlazorGuy/BlazorGalaga
admin-shell-io/aasx-package-explorer
C# based viewer / editor for the Asset Administration Shell
SteveDunn/PacManBlazor
PACMAN in Blazor WebAssembly
Version Downloads Last updated
1.1.1 702,495 2/17/2021
1.1.0-preview2 759 2/17/2021
1.1.0-preview1 25,410 10/31/2019
1.0.0 34,327 10/31/2019
0.4.0 3,634 9/8/2019
0.3.0 431 8/16/2019
0.2.0 407 7/28/2019
0.1.9 1,402 5/1/2019
0.1.8 3,607 11/26/2018
0.1.7 3,260 10/14/2018
0.1.6 3,322 7/29/2018
0.1.5 1,376 7/27/2018
0.1.4 1,518 6/9/2018
0.1.2 1,445 5/23/2018
0.1.1 1,415 5/23/2018
0.1.0 1,513 5/23/2018