I think it will be much faster than now.
I'm searching WebAssembly with WebGL but found less information.
I hope there is a way to do this.

I understand normally you would have a HTMLImageElement with an element reference and would use drawImage that way, however in my case I have many dynamically created Image server side and wondering if its possible some how to pass in say base64encoded image instead from server side.

now that .NET Core 3.0 GA is released, is it supporting .NET Core 3.0 GA?

Hi, firstly thanks for a great library!

I am writing a Blazor WA game. When the game starts, it loads a big spritesheet and when the game runs, it draws rectangles from that spritesheet into the canvas using DrawImageAsync

My question is, what's the best way to initially load that big spritesheet? I've tried using <img id='spritesheet' src='....'/> but I get an exception saying Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLImageElement or SVGImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas)'

My call is:

            ElementReference reference = new ElementReference("spritesheet");

            await _canvas2DContext.DrawImageAsync(reference, spritePosition.X, spritePosition.Y);

When I inspect my spritesheet in the DOM, it is:

Am I setting ElementReference incorrectly?

Are there any example of using DrawImageAsync anywhere?

Can you look at this link? I posted the issue in Unit Test Git but they can't help since they didn't implement BECanvasComponent.
bUnit-dev/bUnit#52

The lineWidth function of the WebGlContext doesn't return boolean, it's a void function. So when I call it through the WebGLContext instance I get the following exception:

Microsoft.JSInterop.JSException: An exception occurred executing JS interop: The JSON value could not be converted to System.Boolean. Path: $ | LineNumber: 0 | BytePositionInLine: 4.. See InnerException for more details. ---> System.Text.Json.JsonException: The JSON value could not be converted to System.Boolean. Path: $ | LineNumber: 0 | BytePositionInLine: 4. ---> System.InvalidOperationException: Cannot get the value of a token type 'Null' as a boolean.

Possible fix in the WebGLContext.cs:

[Obsolete("Use the async version instead, which is already called internally.")]
public void LineWidth(float width) => this.CallMethod<object>(LINE_WIDTH, width);
public async Task LineWidthAsync(float width) => await this.CallMethodAsync<object>(LINE_WIDTH, width);

Full stack trace:

I'm add a parameter for TexImage2DAsync() and test,It's throw a error :
"Failed to execute 'texImage2D' on 'WebGLRenderingContext': parameter 9 is not of type 'ArrayBufferView'"

    var tempdata = new byte[3]
    {
        1,255,255
    }; 
    await _context.TexImage2DAsync<byte>(Texture2DType.TEXTURE_2D, 0,
            PixelFormat.RGB, 1, 1, 0, PixelFormat.RGB, PixelType.UNSIGNED_BYTE, tempdata);

then call JSRuntime wraps data to Uint8Array,I can render the texture

    var tempdata = new byte[3] {1,255,255};
    await JSRuntime.InvokeVoidAsync("TextureTest", _context.Canvas, tempdata);

   window.TextureTest = (canvas,data) => {
       var gl = canvas.getContext("webgl");
       var tempData = new Uint8Array(data);
       gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB,1,1,0, gl.RGB, gl.UNSIGNED_BYTE , tempData);
   }

I would love to have support for putImageData.

Currently I have tweaked the code base as follows:

1. Expose the Id property on the BECanvas component as public:
   public readonly string Id = Guid.NewGuid().ToString();

2. Include a TypeScript file with an interop function:

declare namespace BlazorExtensions {
    class Canvas2d {
        static getContext(canvas: { id }): CanvasRenderingContext2D;
    }
}
// canvas: HTMLCanvasElement
function drawPixels(id: number, x: number, y: number, xw: number, yw: number, pixels: Uint8Array) {
    let ctx = BlazorExtensions.Canvas2d.getContext({        
            id : id
        });

    const imageData = ctx.createImageData(xw, yw);
    
    // Iterate through every pixel
    for (let i = 0; i < imageData.data.length; i += 4) {
        // Modify pixel data
        imageData.data[i + 0] = pixels[i];      // R value
        imageData.data[i + 1] = pixels[i + 1];  // G value
        imageData.data[i + 2] = pixels[i + 2];  // B value
        imageData.data[i + 3] = pixels[i + 3];  // A value
    }

    // Draw image data to the canvas
    ctx.putImageData(imageData, x, y);
}

3. Call the interop function from my Blazor component:

uint[] byteArray = new uint[100 * 100 * 4];

var idx = 0;
for (int y = 0; y < 100; y++)
    for (int x = 0; x < 100; x++)
    {
        byteArray[idx] = 128;     // R
        byteArray[idx + 1] = 200; // G
        byteArray[idx + 2] = 60;  // B
        byteArray[idx + 3] = 255; // A
        idx += 4;
    }

var text =
        await JSRuntime.InvokeAsync<string>("drawPixels", _canvasReference.Id, 0, 0, 100, 100, byteArray);

When following along going through the readme, at first I couldn't get the code to compile. Going through the source code, I found out that I also needed the following using entries in _Imports.razor for it to compile:
@using Blazor.Extensions for the BECanvasComponent and
@using Blazor.Extensions.Canvas.Canvas2D for the Canvas2DContext.

This mismatch between the code and the readme.md file could be fixed in two ways, or a combination, depending on what fits better:

• Align the namespaces to all be Blazor.Extension.Canvas
• Update the readme.md file to say that the above-mentioned namespaces are also necessary

I get the following exception attempting to use the canvas:

Exception thrown: 'Microsoft.JSInterop.JSException' in System.Private.CoreLib.dll
Microsoft.AspNetCore.Components.Browser.Rendering.RemoteRenderer: Warning: Unhandled exception rendering component: t.getContext is not a function
TypeError: t.getContext is not a function
    at add (https://localhost:44387/js/blazor.extensions.canvas.js:1:1738)
    at https://localhost:44387/_framework/blazor.server.js:8:21434
    at new Promise (<anonymous>)
    at e.beginInvokeJSFromDotNet (https://localhost:44387/_framework/blazor.server.js:8:21403)
    at https://localhost:44387/_framework/blazor.server.js:1:16653
    at Array.forEach (<anonymous>)
    at e.invokeClientMethod (https://localhost:44387/_framework/blazor.server.js:1:16624)
    at e.processIncomingData (https://localhost:44387/_framework/blazor.server.js:1:14624)
    at e.connection.onreceive (https://localhost:44387/_framework/blazor.server.js:1:11165)
    at WebSocket.i.onmessage (https://localhost:44387/_framework/blazor.server.js:1:30454)

This is the component class using it:

public class Map : ComponentBase
    {
        [Inject]
        protected IJSRuntime JsRuntime { get; set; }

        [Parameter]
        public long Width { get; set; } = 300;

        [Parameter]
        public long Height { get; set; } = 300;

        BECanvas canvas;
        Canvas2DContext context;

        protected override void BuildRenderTree(RenderTreeBuilder builder)
        {
            base.BuildRenderTree(builder);

            var index = 0;

            builder.OpenComponent<BECanvas>(index++);
            builder.AddAttribute(index++, "width", Width);
            builder.AddAttribute(index++, "height", Height);
            builder.AddComponentReferenceCapture(index++, o => canvas = (BECanvas)o);
            builder.CloseComponent();
        }

        protected override async Task OnAfterRenderAsync()
        {
            await base.OnAfterRenderAsync();

            context = await canvas.CreateCanvas2DAsync();

            await context.SetFillStyleAsync("red");
            await context.FillRectAsync(0, 0, Width, Height);
        }
    }

Not sure what I am missing. I've included the JS file in the head of the _Host doc. The canvas is rendered as follows:
<canvas id="8f95bf4c-0fce-4d0c-9250-39e04b07a5b9" width="1900" height="949" ref="_canvasRef"></canvas>

Can someone commend on the performance difference between Canvas2D versus WebGL versus CanvasKit when drawing 2D vector graphics? It seems Canvaskit can be supported in similar way as WebGL. I like to hear what others think.

FYI: possible relevant link

How to use the Canvas API without referencing any js/ts project? If it is not possible for current BlazorExtensions/Canvas, how to achieve that?

In order to improve performance and allow server-side rendering to work properly, we must implement batch-rendering.

Today, the implementation of this component strictly follow the APIs from HTML5 Canvas where each call actually draw something.

We need to experiment and implement an optimization that batch render requests to it will only invoke JS APIs (local or remote) in a batch to avoid multiple (unnecessary) serialization and interop calls happen.

After linking and validating the program with ProgramParameter.LINK_STATUS and ProgramParameter.VALIDATE_STATUS both returning true, and ProgramParameter.ACTIVE_ATTRIBUTES and ProgramParameter.ACTIVE_UNIFORMS returning correct amount of attributes and uniforms i attempt to call WebGLActiveInfo ai = await gl.GetActiveAttribAsync(prog, index); but the returned WebGLActiveInfo properties such as Name etc, are either empty or 0.

Just clone , build and run in my vs preview.
current commit: 66238f1

build&run from commit

Already drawn lines on canvas will increase their width if a new line with larger width is drawn. This applies to only lines with larger width not smaler.

Hi,

I am trying to rewrite some examples from webgl documentation and seems like I fail at the very beginning :)
I am trying to check whether creating a program shader failed or not. The example JS code should looke similar to:

if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
   alert('An error occurred compiling the shaders: ' + gl.getShaderInfoLog(shader));
 }

But in your C# implementation of GetShaderParameterAsync it require generic parameter and I can't figure out what it should be. Could someone explain?

we're now at 0.6, but i can't downgrade somehow to 0.5.1..

still haven't got the demo to work 👎

How to fix this?

The example uses addTagHelper which is not supported among other issues to get it to compile.
However, after figuring out how to get it to compile without warnings my call:
' this._context = await this._canvasRef.CreateCanvas2DAsync();'
created an 'unhandled exception rendering component ':
Microsoft.JSInterop.JSException: t.getContext is not a function'

According to the WebGL Specification the method texImage2D has an overload with 6 arguments and one with 9 arguments. TexImage2DAsync batches the command with only 8 arguments. The border argument is not passed (it always has to be 0...)

Possible fix in WebGLContext.cs:

public async Task TexImage2DAsync<T>(Texture2DType target, int level, PixelFormat internalFormat, int width, int height, PixelFormat format, PixelType type, T[] pixels)
where T : struct
=> await this.BatchCallAsync(TEX_IMAGE_2D, isMethodCall: true, target, level, internalFormat, width, height, 0, format, type, pixels);

Stack trace:

Issue
TextMetrics properties are not set after a call to MeasureText()

Code

protected BECanvasComponent Canvas;
private Canvas2dContext Context;
Context = Canvas.CreateCanvas2d();
double length = 282.84;
TextMetrics lengthTextMetrics = Context.MeasureText(length.ToString());

lengthTextMetrics.Width always reports 0. I tried the equivalent of this in javascript directly and it reports 282.84.

Even in javascript, though, the other properties appear undefined. This seems to be because they are not supported by all browsers yet. Perhaps this is related to the reason Width will not work as well.

If I would want to embed BECanvas to a component that would be put on any razor page, would it be possible to inject the javascript interop from the codebehind (e.g. constructor) so that the end-user of the wrapping component doesn't have to inject that?

Hi,

Is there a way to set canvas to full document width and height? Also can you retrieve the current canvas width and height in the component OnAfterRender()?

Thanks for any help

How do you enable free form, 2D drawing on the canvas?

Unable to get canvas to render sample content

• Updated To Blazor 0.5.1
• Created a new Project
• pulled down Blazor.Extensions.Canvas 0.1.6
• Created class

` public class IndexComponent : BECanvasComponent
{
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);
    }
}`

Replaced Index.cshtml with
@page "/"
@inherits IndexComponent

BECanvas ref="@_canvasReference"></BECanvas

Then In _viewimports.cshtml added

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

It complies and runs but it shows nothing in the canvas. But if i inspect i see
<canvas id="22f7aebb-6bcb-486b-b62d-1c46c0e1f3d8" width="0" height="0" _bl_2=""></canvas>

No doubt I am missing something obvious, as I am new to Blazor, but BECanvasComponent is internal so how can I interact with it?

I would like to be able to set arbitrary attributes (perhaps via attribute splatting) on the canvas element. The reason is to be able to use the canvas gauges library (https://canvas-gauges.com/). All that is needed is to have the ability to set, for example, an attribute like data-type="radial-gauge", data-width="300", etc. on the underlying canvas element.

Is this possible now? Would it be possible by extending the existing code?

Canvas Gauges is a beautiful library of UI elements, it would be great to be able to use them in a Blazor application. I tried just using a element directly in my razor code, and the element shows briefly during page load, but then disappears. I suspect there is something about Blazor that interferes with this, hence the need for this Blazor Extension.

Thanks,
Randy

Using canvas with an image that refreshes very often (showing simulation real time) I am using a library that requires an url to the image. Therefore I would love a canvas.toDataURL() function.

Leaflet.ImageOverlay.Rotated.js ->

var overlay = L.imageOverlay.rotated(...        }); 
// routine that updates image
overlay.setUrl(canvas.toDataURL());

Please add drawImage support.
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage

I use clear and draw a triangle,sometime get a error result that background flash or triangle isn't drawed.

            await this._context.ClearColorAsync(0, 0.8f, 0, 1);
            await _context.ClearAsync(BufferBits.COLOR_BUFFER_BIT);
            await _context.DrawArraysAsync(Primitive.TRIANGLES, 0, 3);

I have to use JSRuntime both clear and drawArrays,If executed separately also get that error.

    await JSRuntime.InvokeVoidAsync("DrawArrays", _context.Canvas);
    <script>
        window.DrawArrays = (canvas) => {
            var gl = canvas.getContext("webgl");
            gl.clearColor(0, 0.8, 0, 1);
            gl.clear(gl.COLOR_BUFFER_BIT);
            gl.drawArrays(gl.TRIANGLES, 0, 3);
        }
    </script>

Adding BECanvas component to a razor page causes the following build error:

Cannot implicitly convert type 'Microsoft.AspNetCore.Components.ElementReference' to 'Blazor.Extensions.BECanvasComponent'

I am using .NET Core Preview 9

Hi i am thinking of using this library, as i know native html5 canvas allows interaction with the use of javascript. I am not a big fan of javascript though, and i am therefore wondering if this is possible with this library and C#?

A simple example is very welcome, so i have an idea of how it would look :-)

Using canvas draw image by image's url, just like this:

function(url,weight,height,drawX,drawY){
  var img = new Image();
  img.src = url;
  img.width = weight;
  img.height = height;
  
  img.onload = function(){      
    context.drawImage(img,drawX,drawY);
  } 
 }

Therefore please add support for drawing image by url. Thanks a lot.

canvas have createLinearGradient methods,But I didn't find it in this repository.
Hope to support it.
thanks!

Using the following code should convert clip space into screen space and generate a 64x64 square at 0,0 but it doesn't. Cannot tell where it is actually drawing as I cannot get debuggers such as renderDoc to work.

        await GL.ViewportAsync(0, 0, 500, 500);

        float[] matrix = await M4.Computations.Orthographic(0, 500, 500, 0, -1, 1);
        matrix = await M4.Computations.Translate(matrix, 0, 0, 1);
        matrix = await M4.Computations.Scale(matrix, 64, 64, 1);

        await GL.UniformMatrixAsync(matrixLocation, false, matrix);

In 1.2, these were the following Nuget dependencies:

• Microsoft.AspNetCore.Blazor.Browser (>= 0.3.0)
• Microsoft.AspNetCore.Blazor.Build (>= 0.3.0)

However, in 1.3, the Nuget dependencies are now this:

• Blazor.Extensions.Canvas.JS (>= 0.1.3)
• Microsoft.AspNetCore.Blazor.Browser (>= 0.4.0)
• Microsoft.AspNetCore.Blazor.Build (>= 0.4.0)

Blazor.Extensions.Canvas.JS does not appear to exist. Trying to access it with nuget.org results in a 404 page. Also, when trying to install the package via Nuget, the following error appears:

Unable to find package Blazor.Extensions.Canvas.JS. No packages exist with this id in source(s): Microsoft Visual Studio Offline Packages, nuget.org

A lot of errors when I try to install it on new project:
https://i.imgur.com/Bg964WC.png

I want to be able to call getBoundingClientRect() on the <canvas>, so that I can convert mouse coordinates into client coordinates. My instinct is to use JS Interop to do that, but the Id property is not public, so I am thinking that I will have to wrap the BECanvas in a <div> with an id that I can control, and then use look that up and get its child control.

This feels a bit convoluted to me. Is there a better way?

Perhaps you could make Id a public property?

The samples provided on the project page as well as within the source do not work since CreateCanvas2DAsync does not exist in BECanvasComponent.

Failed to execute 'texImage2D' on 'WebGLRenderingContext': Valid arities are: [6, 9], but 8 arguments provided

        uint[] tempData = new uint[4]{ 255, 255, 255,255 } ;
        var texture = await _context.CreateTextureAsync();
        await _context.BindTextureAsync(TextureType.TEXTURE_2D, texture);
        await _context.TexImage2DAsync<uint>(Texture2DType.TEXTURE_2D, 0, PixelFormat.RGBA, 1, 1
            , PixelFormat.RGBA, PixelType.UNSIGNED_BYTE, tempData);

I'm not sure my usage is correct , throw this error when the program executes to TexImage2DAsync.

Is it possible to bind event handlers to the underlying blazor component (ElementRef?) for e.g. UIMouseEventArgs or UITouchEventArgs?

It would be nice if the filleRule argument was implemented on the Fill() method.

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fill

Using reflection I was able to invoke the BatchCallAsync() and call fill with the fillRule argument. It worked fine so it should be pretty straight forward to implement it officially.

How to call OnAfterRenderAsync again after a window resize using JSInterop?

I upgraded the code for Blazor 0.8.0 for my own project. Is this in the pipeline, or did you want the code?

Hi. I'm trying to build a drawing library which will target both Blazor and Xamarin SkiaSharp.
The problem I faced is that SkiaSharp apis are synchronous while blazor apis are async..

So I'm trying to make Blazor Canvas methods to work synchronously.

As far as I see Blazor synchronous methods are deprecated but are based on .GetAwaiter().GetResult() internally (in CallMethod<T>). I tried using that in test project:

//await this._context.FillRectAsync(10, 100, 100, 100);
this._context.FillRectAsync(10, 100, 100, 100).GetAwaiter().GetResult();

which didn't work and caused browser to hang.

My question is: are there any plans on restoring synchronous apis in future?
Maybe there is an easy way to call canvas apis synchronously?
Maybe I'm looking at wrong direction and it's better to have my library's drawing methods asynchronous but find a way to execute async code from SkiaSharp OnCanvasViewPaintSurface?

I'm yet to dig deeper into how SynchronizationContext works in blazor but wanted to check with somebody more experienced first.

Thanks!

Issue
When trying to call this._context = this._canvasReference.CreateCanvas2d(); in a server-side Blazor app you get the following exception:
Unable to cast object of type 'Microsoft.AspNetCore.Blazor.Server.Circuits.RemoteJSRuntime' to type 'Microsoft.JSInterop.IJSInProcessRuntime'.

It seems related to the "Calling JavaScript from .NET" section of:
Blazor 0.5.0 experimental release now available.

To Reproduce
It happens when you try the Sample in a server-side Blazor app.

Be pre-warned I have no idea what I'm doing.....

Trying to use your master branch with preview8 default Blazor Server. Getting object not set to an instance of an object.

I am able to pull your repo down and run the server test project. So I added a Blazor default to your solution and compared and played till I was able to get it to work.

This is the diff from a vanilla preview8 blazor server project and what I had to do to get it work.

Grummle@d3b8c05

Not sure if this is helpful or what the changes even mean to be honest 😃