How do you use Canvas in Blazor?

YasminRadwan26

Save to bookmark

2022-05-22

230

This code will help you to understand how to use Canvas in Blazor.

Asp.net, examples, Asp.net examples,

All Answers

YasminRadwan26

2022-05-22

need an explanation for this answer? contact us directly to get an explanation for this answer

Currently, there is no direct Canvas support in WebAssembly. In order to draw using Canvas, you can use the third-party, free Blazor.Extensions.Canvas library. Add Blazor.Extensions.Canvas NuGet to your project and add the following code snippet to draw a rectangle. It draws shapes in Blazor with the reference that is created for the Canvas element in the Razor page.

[index.html/_host.cshtml]
<head>

 <script src="_content/Blazor.Extensions.Canvas/blazor.extensions.canvas.js"></script>

</head>

[index.razor]

@page "/"
@using Blazor.Extensions; 
@using Blazor.Extensions.Canvas
@using Blazor.Extensions.Canvas.Canvas2D;

<BECanvas Width="300" Height="400" @ref="_canvasReference"></BECanvas>

@code {
    private Canvas2DContext _context;

    protected BECanvasComponent _canvasReference;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        this._context = await this._canvasReference.CreateCanvas2DAsync();
        await this._context.SetFillStyleAsync("red");

        await this._context.FillRectAsync(10, 100, 100, 100);

        await this._context.SetFontAsync("38px Calibri");
        await this._context.StrokeTextAsync("Hello Blazor!!!", 5, 100);
 }
}

need an explanation for this answer? contact us directly to get an explanation for this answer

total answers (1)

How do you use Canvas in Blazor?

All Answers

Similar questions

need a help?

find thousands of online teachers now