https://github.com/aptacode/blazorcanvas

A high performance dotnet 7 blazor wrapper around the HTML5 Canvas
https://github.com/aptacode/blazorcanvas

aptacode blazor blazor-webassembly canvas dotnet dotnet7 drawing graphics html5-canvas performance-blazor-wrapper timmoth

Last synced: 5 days ago
JSON representation

A high performance dotnet 7 blazor wrapper around the HTML5 Canvas

• Host: GitHub
• URL: https://github.com/aptacode/blazorcanvas
• Owner: Aptacode
• License: gpl-3.0
• Created: 2021-01-05T17:25:24.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2022-12-30T17:35:57.000Z (almost 2 years ago)
• Last Synced: 2024-04-27T03:41:37.585Z (8 months ago)
• Topics: aptacode, blazor, blazor-webassembly, canvas, dotnet, dotnet7, drawing, graphics, html5-canvas, performance-blazor-wrapper, timmoth
• Language: C#
• Homepage:
• Size: 23.9 MB
• Stars: 16
• Watchers: 2
• Forks: 3
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


   


       



A high performance blazor wrapper around the HTML5 Canvas utilizing unmarshalled JS calls

[![demo](https://github.com/Aptacode/BlazorCanvas/actions/workflows/demo.yml/badge.svg)](https://aptacode.github.io/BlazorCanvas/)

[![Codacy Badge](https://app.codacy.com/project/badge/Grade/249116ea839b4c689cada11bbc89ab0b)](https://www.codacy.com/gh/Aptacode/BlazorCanvas/dashboard?utm_source=github.com&utm_medium=referral&utm_content=Aptacode/BlazorCanvas&utm_campaign=Badge_Grade)

[![code metrics](https://github.com/Aptacode/BlazorCanvas/actions/workflows/metrics.yml/badge.svg)](https://github.com/Aptacode/BlazorCanvas/blob/main/CODE_METRICS.md)

[![nuget](https://img.shields.io/nuget/v/Aptacode.BlazorCanvas.svg?style=flat&color=brightgreen)](https://www.nuget.org/packages/Aptacode.BlazorCanvas/)

![last commit](https://img.shields.io/github/last-commit/Aptacode/BlazorCanvas?style=flat&cacheSeconds=86000&color=brightgreen)

[![License: MIT](https://img.shields.io/badge/License-MIT-brightgreen.svg)](https://opensource.org/licenses/MIT)

[![NuGet](https://img.shields.io/nuget/v/Aptacode.BlazorCanvas.svg?style=flat)](https://www.nuget.org/packages/Aptacode.BlazorCanvas/)

![last commit](https://img.shields.io/github/last-commit/Aptacode/BlazorCanvas?style=flat-square&cacheSeconds=86000)

## Usage

### RazorComponent.razor

#### Setup your canvas element

```html

    

```

### RazorComponent.razor.cs

#### Draw to the canvas!

```csharp

    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

 ```