BlazorCanvas

<p align="center"> <div style="width:640;height:320"> <img style="width: inherit" src="https://raw.githubusercontent.com/Aptacode/BlazorCanvas/main/Resources/Images/Banner.jpg"> </div> </p>

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