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! )
Blazorex can be installed as Nuget package: https://www.nuget.org/packages/Blazorex/
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>
<!-- other tags... -->
<link href="_content/Blazorex/blazorex.css" rel="stylesheet" />
</head>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.
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