How do I draw images?

[SteveDunn]

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?

[SteveDunn]

Sorry, I've answered my own question!

My confusion arose from the fact that I thought ElementReference was the ID of the DOM element.

In fact, it's the property of the Blazor page! e.g.

<img @ref="spritesheet" hidden id="spritesheet" src="Assets/spritesheet.png" />

<BECanvas Width="300" Height="400" @ref="_canvasReference"></BECanvas>

@code
{
    ElementReference spritesheet;