A high performance blazor wrapper around the HTML5 Canvas utilizing unmarshalled JS calls
Usage
RazorComponent.razor
Setup your canvas element
<BlazorCanvas @ref="Canvas">
<canvas width="100" height="100"></canvas>
</BlazorCanvas>RazorComponent.razor.cs
Draw to the canvas!
protected BlazorCanvas Canvas { get; set; }
protected override async Task OnInitializedAsync()
{
using var timer = new PeriodicTimer(TimeSpan.FromMilliseconds(15));
while (await timer.WaitForNextTickAsync())
{
await Draw();
}
}
protected async Task Draw()
{
if (!Canvas.Ready)
{
return;
}
//Clear
Canvas.ClearRect(0, 0, Width, Height);
//Draw Ellipse
Canvas.LineWidth(2);
Canvas.StrokeStyle("blue");
Canvas.FillStyle("green");
Canvas.Ellipse(40, 40, 30, 30, (float)Math.PI, 0, 2 * (float)Math.PI);
Canvas.Stroke();
Canvas.Fill();
}
#endregion
