How can I call a custom JavaScript function, to manipulate the HTML5 canvas element, from within the "HTML" section of my Blazor server project?

I have a Blazor server application. On one of my pages I have the standard setup:

MyPage.razor:

@page "/mypage"<div><!-- stuff here ... --></div>@code {    // stuff here ...}

On this page, I am looping through a List like so:

<div>    @foreach(MyData anData in ListOfMyData){        // stuff here ...    }</div>

Within this loop, I want to create an image with the HTML canvas element based off the data within MyData.

<div>    @foreach(MyData anData in ListOfMyData){<div><canvas id="@anData.id" class="myDataImage"></canvas></div>    }</div>

Within the @code section, I am injecting IJSRuntime:

@code {    [Inject]    IJSRuntime JSRuntime { get; set; }}

And I have my JavaScript code in: MyApp/wwwroot/js/MyJavaScript.js

function drawImage(canvasID, data){    let thisCanvas = document.getElementById(canvasID);    thisCanvas.width = xxx;    thisCanvas.height = xxx;    let ctx = thisCanvas.getContext('2d');    ctx.beginPath();    // ... more here}

"Individually", this all works, meaning:

1. I have successfullly used IJSRuntime before with other custom JavaScript fuctions.
2. The JavaScript I have works, as I have tested it in a "vanilla" HTML project.

What I am having trouble figuring out is how to call the JavaScript function from within the "HTML" section of my Blazor (.razor) page.