aptacode / blazorcanvas

A high performance dotnet 7 blazor wrapper around the HTML5 Canvas

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

blazorcanvas's Issues

Only a single Canvas on a page supported?

I was moving from the using Blazor.Extensions.Blazor to this one and enjoy the library but stumbled upon a problem. When I add more than one canvas it seems drawing ends up in one and the same canvas.
Except for having multiple canvases at different positions, it is also very useful with layers having different z order for two canvases.

This is the layout. Drawing in Canvas1 actually ends up in Canvas 2.

<div class="canvas1">
    <BlazorCanvas @ref="Canvas1">
        <canvas width="@Width" height="@Height"></canvas>
    </BlazorCanvas>
</div>
<div class="canvas2">
    <BlazorCanvas @ref="Canvas2">
        <canvas width="@Width" height="@Height"></canvas>
    </BlazorCanvas>
</div>

<style>
    .canvas1 {
        position: relative;
        top: 8px;
        width: 100%;
        height: 600px;
        left: 0
    }

    .canvas2 {
        position: relative;
        top: 608px;
        width: 100%;
        left: 0
    }
</style>

Is it possible to render the <a> Tag in the FillText in the graph?

I wonder if it is possible to render the tag in the Text.
ctx.FillText("KidLable", 0, 10);
Thanks!

Complete coverage of Canvas API

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API

Implement call batching