Blazorex 1.2.1
dotnet add package Blazorex --version 1.2.1
NuGet\Install-Package Blazorex -Version 1.2.1
<PackageReference Include="Blazorex" Version="1.2.1" />
<PackageVersion Include="Blazorex" Version="1.2.1" />
<PackageReference Include="Blazorex" />
paket add Blazorex --version 1.2.1
#r "nuget: Blazorex, 1.2.1"
#:package Blazorex@1.2.1
#addin nuget:?package=Blazorex&version=1.2.1
#tool nuget:?package=Blazorex&version=1.2.1
Blazorex

Description
Blazorex is an HTML Canvas wrapper library for Blazor.

It has some interesting functionalities like:
- multiple canvases
- background rendering
- image rendering
- procedural image generation (yes, the fire on the background is fully procedural! Thanks filipedeschamps for the awesome repository showing how to render the Doom fire! )
Installation
Blazorex can be installed as Nuget package: https://www.nuget.org/packages/Blazorex/
Usage
Simple scenario
Just add the Canvas Component to your Razor page and register to the OnCanvasReady to receive the CanvasBase instance.
Then use OnFrameReady to define your update/render logic:
<Canvas Width="800" Height="600"
OnFrameReady="(t) => OnFrameReady(t)"
OnCanvasReady="(ctx) => OnCanvasReady(ctx)" />
@code{
CanvasBase _canvas;
private void OnCanvasReady(CanvasBase canvas)
{
_canvas = canvas;
}
private void OnFrameReady(float timeStamp)
{
// your render logic goes here
}
}
You might also need to update your index.html to include the library's CSS:
<head>
<link href="_content/Blazorex/blazorex.css" rel="stylesheet" />
</head>
Multiple Canvases
In case you want to have multiple canvases on the same page, you can use the CanvasManager component instead:
<CanvasManager @ref="_canvasManager" />
@code{
CanvasManager _canvasManager;
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (!firstRender)
return;
_canvasManager.CreateCanvas("myCanvas", new CanvasCreationOptions()
{
Width = 800,
Height = 600,
Hidden = false,
OnCanvasReady = this.OnMyCanvasReady,
OnFrameReady = this.OnMyCanvasFrameReady,
});
}
}
You simply have to get a reference to the CanvasManager and then call the CreateCanvas passing an instance of CanvasCreationOptions with the desired parameters.
For a complete list of options for Canvas initialization, see here.
For the complete documentation, check the official website
The ./samples folder contains some examples of how to setup the canvas and draw some cool stuff 😃
A sample game can be found here: Blazeroids
| Product | Versions Compatible and additional computed target framework versions. |
|---|---|
| .NET | net9.0 is compatible. net9.0-android was computed. net9.0-browser was computed. net9.0-ios was computed. net9.0-maccatalyst was computed. net9.0-macos was computed. net9.0-tvos was computed. net9.0-windows was computed. net10.0 was computed. net10.0-android was computed. net10.0-browser was computed. net10.0-ios was computed. net10.0-maccatalyst was computed. net10.0-macos was computed. net10.0-tvos was computed. net10.0-windows was computed. |
-
net9.0
- Microsoft.AspNetCore.Components.Web (>= 9.0.10)
NuGet packages
This package is not used by any NuGet packages.
GitHub repositories
This package is not used by any popular GitHub repositories.
| Version | Downloads | Last Updated |
|---|---|---|
| 1.2.1 | 539 | 10/14/2025 |
| 1.2.0 | 206 | 10/14/2025 |
| 1.1.6 | 711 | 6/3/2025 |
| 1.1.5 | 221 | 6/2/2025 |
| 1.1.4 | 287 | 4/28/2025 |
| 1.1.3 | 1,032 | 1/20/2025 |
| 1.1.2 | 403 | 12/16/2024 |
| 1.1.1 | 207 | 11/19/2024 |
| 1.1.0 | 227 | 9/25/2024 |
| 1.0.4 | 483 | 6/27/2024 |
| 1.0.3 | 357 | 12/31/2023 |
| 1.0.2 | 310 | 9/5/2023 |
| 1.0.1 | 351 | 6/13/2023 |
| 1.0.0 | 296 | 6/13/2023 |
| 0.0.5 | 686 | 10/3/2022 |
| 0.0.4 | 599 | 10/3/2022 |
| 0.0.3 | 593 | 9/19/2022 |
| 0.0.2 | 581 | 9/19/2022 |
| 0.0.1 | 600 | 9/19/2022 |