excubo-ag / Blazor.Canvas

https://excubo-ag.github.io/Blazor.Canvas/
MIT License
220 stars 23 forks source link

How can I get the width and height of a canva ? #167

Closed Gandalf-Le-Dev closed 1 year ago

stefanloerwald commented 1 year ago

There's nothing special about the canvas in this library, so standard html applies: https://stackoverflow.com/questions/4032179/how-do-i-get-the-width-and-height-of-a-html5-canvas

Codyrg commented 1 year ago

There's nothing special about the canvas in this library, so standard html applies: https://stackoverflow.com/questions/4032179/how-do-i-get-the-width-and-height-of-a-html5-canvas

Thank you @stefanloerwald for this library. Would you be able to elaborate how one should access the width and height using the library?

I see the many different Get functions on the Canvas type, but am unsure what I actually need to use to query the height and width from the canvas element.

image

Thank you again.

stefanloerwald commented 1 year ago

Getting dimensions of a canvas is not supported with the Canvas blazor component. Instead, just use a regular html canvas element like this:

@inject Microsoft.JSInterop.IJSRuntime js; <canvas @ref="normal_canvas" width="600px" height="300px"></canvas>

Then you can use ordinary JavaScript, as described in the stackoverflow page, to get all the relevant properties of the canvas.