Blazor.Extensions.Canvas 0.1.4

Usage

The following snippet shows how to consume the Canvas API in a Blazor component.

On your _ViewImports.cshtml add the using and TagHelper entries:

@using Blazor.Extensions.Canvas
@addTagHelper *, Blazor.Extensions.Canvas

On your .cshtml add a BECanvas and make sure you set the ref to a field on your component:

@page "/"
@inherits IndexComponent

<h1>Canvas demo!!!</h1>

<BECanvas ref="@_canvasReference"></BECanvas>

On your component C# code (regardless if inline on .cshtml or in a .cs file), from a BECanvasComponent reference, create a Canvas2dContext, and then use the context methods to draw on the canvas:

private Canvas2dContext _context;

protected BECanvasComponent _canvasReference;

protected override void OnAfterRender()
{
    this._context = this._canvasReference.CreateCanvas2d();
    this._context.FillStyle = "green";

    this._context.FillRect(10, 100, 100, 100);

    this._context.Font = "48px serif";
    this._context.StrokeText("Hello Blazor!!!", 10, 100);
}

Contributions and feedback

Please feel free to use the component, open issues, fix bugs or provide feedback.

Contributors

The following people are the maintainers of the Blazor Extensions projects:

• Attila Hajdrik
• Gutemberg Ribiero