How do I draw a circle in Excubo.Blazor.Canvas?

Use the arc path methods: first call BeginPathAsync(), then ArcAsync() with center coordinates and radius, and finally FillAsync() or StrokeAsync(). The API grouping under Paths makes this intuitive with methods like context.Paths.ArcAsync().

What's the performance difference between Excubo.Blazor.Canvas and direct JavaScript for canvas?

Excubo.Blazor.Canvas batches calls to reduce interop overhead, but it still incurs some latency compared to pure JavaScript. For simple drawings, it's fine, but for intensive animations, native JavaScript might be faster due to fewer abstraction layers.

Can I use WebGL with Excubo.Blazor.Canvas?

No, the library currently only supports the 2D canvas context, as indicated in the examples using GetContext2DAsync(). WebGL is not mentioned in the README or features, so you'd need separate JavaScript interop for 3D graphics.

How to handle mouse clicks on the canvas in Blazor with this library?

You need to handle Blazor events separately: add @onclick to the canvas element, then use JavaScript interop or C# logic to get coordinates and call canvas methods. The library focuses on drawing, not event handling, so integration requires additional code.

Excubo.Blazor.Canvas or writing my own JavaScript interop for canvas?

Excubo.Blazor.Canvas is better if you want type safety, batching, and no JavaScript maintenance. Writing custom interop is more flexible for edge cases but requires manual error handling and optimization, making this library a time-saver for most Blazor projects.

Blazor.Canvas — HTML Canvas Wrapper for Blazor

What is Blazor.Canvas?

Excubo.Blazor.Canvas is a C# wrapper library for the HTML Canvas API that allows Blazor developers to create and manipulate canvas graphics entirely in C# without writing JavaScript. It provides a type-safe, performant interface to draw shapes, text, images, and apply transformations directly from Blazor components.

Target Audience

Blazor developers building interactive graphics, data visualizations, games, or custom drawing interfaces who want to avoid mixing JavaScript with their C# codebase.

Value Proposition

It eliminates the need for JavaScript in canvas operations, offers full IntelliSense support, batches calls for performance, and maintains API compatibility with the standard HTML canvas while being purely C#.

Overview

Excubo.Blazor.Canvas is a wrapper library that provides full access to the HTML Canvas API from C# in Blazor applications. It enables developers to create rich graphics and visualizations directly in their Blazor components without writing any JavaScript.

Key Features

Pure C# Implementation — No JavaScript code required, leveraging Blazor's JavaScript interop internally.
Type-Safe API — Full IntelliSense support with method signatures matching the canvas specification.
Performance Optimization — Batches multiple canvas operations into single JavaScript interop calls to minimize overhead.
Dual Naming Conventions — Supports both C#-style async method names and original JavaScript naming via a .JS property.
API Grouping — Methods are logically grouped (e.g., Drawing, Transformations, Shadows) for better discoverability and intent clarity.

Philosophy

The library prioritizes type safety, performance through batching, and a zero-JavaScript payload requirement, allowing Blazor developers to work entirely in C# while utilizing the full canvas API.

Use Cases

Best For

Creating data visualizations and charts in Blazor applications
Building interactive games or simulations with canvas graphics in C#
Developing custom drawing tools or whiteboard features in Blazor
Rendering complex shapes and animations without JavaScript
Integrating canvas-based UI components in enterprise Blazor apps
Educational projects teaching graphics programming in a C#/Blazor environment

Not Ideal For

High-performance real-time graphics or 60fps games where JavaScript interop latency could degrade smoothness
Teams already using JavaScript canvas libraries (e.g., Fabric.js, Konva.js) and unwilling to migrate logic to C#
Projects requiring direct integration with JavaScript-only canvas plugins or browser APIs not yet wrapped by the library

Pros & Cons

Pros

Type Safety and IntelliSense

Provides a fully type-safe API with IntelliSense support, matching the HTML canvas specification to reduce errors, as emphasized in the design principles.

Performance via Batching

Optimizes performance by batching consecutive canvas operations into fewer JavaScript interop calls, minimizing overhead as described in the performance section.

Pure C# Development

Eliminates the need for any JavaScript code, allowing developers to work entirely in C# within Blazor workflows, per the library's zero-JavaScript payload goal.

Enhanced API Discoverability

Groups methods into logical categories like Shadows and Transformations for better intent clarity and easier navigation, using helper groups from Excubo.Generators.Grouping.

Cons

JavaScript Interop Overhead

Despite batching, the reliance on Blazor's JavaScript interop can introduce latency, making it less ideal for high-frequency animations or real-time applications compared to native JavaScript.

Blazor Dependency and Breaking Changes

Tightly coupled with Blazor and .NET versions; for example, version 3.0.0 dropped support for older frameworks, forcing migrations and potentially disrupting existing projects.

Limited Ecosystem Integration

Cannot directly leverage popular JavaScript canvas libraries or tools, requiring developers to recreate functionality in C# or find complex workarounds for advanced features.

Blazor.Canvas

What is Blazor.Canvas?

Overview

Key Features

Philosophy

Use Cases

Best For

Not Ideal For

Pros & Cons

Pros

Cons

Frequently Asked Questions

Related Projects

Found a gem we're missing?

Blazor.Canvas

What is Blazor.Canvas?

Overview

Key Features

Philosophy

Use Cases

Best For

Not Ideal For

Pros & Cons

Pros

Cons

Frequently Asked Questions

Related Projects

Found a gem we're missing?