Blazor.Extensions.Canvas

Blazor.Extensions.Canvas is a NuGet package that simplifies using the HTML5 Canvas API in Blazor applications. It provides a set of components and helper methods that encapsulate common canvas operations, making it easier to render and interact with canvas elements.

Installation

To use Blazor.Extensions.Canvas, install the NuGet package in your Blazor project:

Install-Package Blazor.Extensions.Canvas
          

Usage

1. Add the Canvas Component:

Add the Canvas component to your Blazor component:

@using Blazor.Extensions.Canvas
          <Canvas Width="500" Height="500" @ref="canvas" />
          

2. Access the Canvas Context:

Use the canvas reference to access the canvas context:

@code {
              private CanvasComponent canvas;
          
              protected override void OnInitialized()
              {
                  // Get the canvas context
                  var context = canvas.CanvasContext;
              }
          }
          

3. Drawing on the Canvas:

The CanvasContext object provides methods for drawing on the canvas:

// Clear the canvas
          context.ClearRect(0, 0, canvas.Width, canvas.Height);
          
          // Draw a rectangle
          context.FillStyle = "red";
          context.FillRect(10, 10, 50, 50);
          
          // Draw a circle
          context.FillStyle = "blue";
          context.BeginPath();
          context.Arc(100, 100, 50, 0, 2 * Math.PI);
          context.Fill();
          

4. Handling Events:

You can handle events like mouse clicks and key presses:

// Handle mouse clicks
          canvas.OnMouseDown += (e) => {
              // Get mouse coordinates
              var mouseX = e.OffsetX;
              var mouseY = e.OffsetY;
          };
          

5. Animation:

The CanvasComponent provides an InvokeAsync method for performing animations:

protected override async Task OnAfterRenderAsync(bool firstRender)
          {
              if (firstRender)
              {
                  // Perform animation loop
                  while (true)
                  {
                      // Update game state
                      // Redraw on the canvas
          
                      await canvas.InvokeAsync(() =>
                      {
                          // Clear and redraw
                          context.ClearRect(0, 0, canvas.Width, canvas.Height);
                          // ...
                      });
          
                      // Wait for next frame
                      await Task.Delay(16); // 60 FPS
                  }
              }
          }
          

6. Example:

The Pacman component in the PacmanBlazor project demonstrates how to use Blazor.Extensions.Canvas to render game elements:

PacmanBlazor/Components/Pacman.razor

7. Additional Features:

• Image Drawing: Use the DrawImage method to draw images on the canvas.
• Text Rendering: Use the FillText and StrokeText methods to render text.
• Transforms: Use translate, rotate, and scale to transform the canvas context.
• Custom Shapes: Define custom shapes using beginPath, lineTo, arcTo, etc.

8. Source Code:

The Blazor.Extensions.Canvas source code can be found on GitHub:

https://github.com/BlazorExtensions/Blazor.Extensions.Canvas