Resizing the Canvas to fit Container

[fdahlberg]

Hi,

I have placed the BECanvas inside of a div. This div is resized based on the layout of my page. Is there a good way to automatically resize the BECanvas so that it always fill up the available space in the grid. I've tried with both css and javascript but can't find a way that works reliably. Using a normal canvas I found that using flexbox seemed to work fine. But I can't get this to work with BECanvas.

Kind Regards Fredrik Dahlberg

[KieranFoot]

This is just an issue with the way the developer defined the Width and Height as a long instead of using a sring to allow for full usage.

The component needs to have Class and/or Style parameters added to pass styling options along to the Canvas element.

I'll take a look at creating a PR to resolve this as I am hitting this same issue.

[KieranFoot]

I have created a pull request #118 which resolves this issue. Hopefully the author will approve and merge it.

[michaelcsikos]

Hi @KieranFoot and @fdahlberg, have you got an example showing how you solved this?

[genifycom]

Say you want a border around the BECanvas so that you can see the extents like this:

<BECanvas Width="300" Height="400" @ref="_canvasReference" style="border:2px solid"></BECanvas>

This will give an error:

crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100] Unhandled exception rendering component: Object of type 'Blazor.Extensions.Canvas.BECanvas' does not have a property matching the name 'style'.

This makes it difficult to ensure that drawing is within bounds.