blazor.extensions.rcanvas

Blazor.Extensions.RCanvas

This repository consists of Canvas integration or Canvas Reference in Blazor. we can use the exact methods and properties of canvas javascript in blazor to draw a 2D context.

Run below npm commands in vscode terminal.

• install nuget package "Blazor.Extensions.RCanvas" to the Project
• Please ensure that "OnAfterRenderAsync" method is get called, because it will get called on Interactive RenderMode.

How to use

• Add the Below script tag in head section.

• Add the below namespaces in the component or page.

  @using Blazor.Extensions.RCanvas.Canvas;
  @using WebComponents.Components.Controls.Canvas
  

• Use the Canvas by add the below html tag.

  <RCanvas @ref="Canv" Width="400" Height="400"></RCanvas>      
  

• In CS code how to access, see the below snippet.

@code {

private RCanvas Canv {get; set;}

private CanvasContext canvasContext;

protected override async Task OnAfterRenderAsync(bool firstRender)
{    
    try {
        if(firstRender) {
            this.Canv.ScriptLoaded = async () =>
            {
                await CreateCanvas();
            };               
        }
    }
    catch(Exception ex){
        string m = ex.Message;
    }

    await base.OnAfterRenderAsync(firstRender);
}


private async Task CreateCanvas(){

    if (this.Canv.IsScriptLoaded)
    {        
       canvasContext = await this.Canv.CreateContext2DAsync();

       if(canvasContext!=null)
       {
           await canvasContext.BeginPathAsync();
           canvasContext.LineWidth = 2;
           var met = await canvasContext.MeasureTextAsync("Sample Title");
           await canvasContext.MoveToAsync(0, 0);
           await canvasContext.LineToAsync(300, 170);
           await canvasContext.StrokeAsync();
           await canvasContext.ClosePathAsync();

           await canvasContext.BeginPathAsync();
           var res = await canvasContext.CreateLinearGradientAsync(0,0,270, 0);
           await res.AddColorStopAsync(0, "blue");
           await res.AddColorStopAsync(0.7, "yellow");
           await res.AddColorStopAsync(1, "red");
           canvasContext.FillStyle = res.RsubId;
           await canvasContext.FillRectAsync(20,20,150,100);
           await canvasContext.ClosePathAsync();
       }
    }
}