Canvas redering list images

[GiorgioMauro]

I need some help with my Blazor application. I’m working with a canvas and images, and I have a list of images that I load from a folder. My issue is that I want to change the displayed image using arrow buttons, but currently, only the first image loaded during initialization is being rendered. Could you help me improve my code? I’ll paste the UI Blazor code and a few methods below.

razor.cs

            <div @ref="canvasDiv" @onmousedown="OnMouseDown" @onmousemove="OnMouseMove" @onmouseup="OnMouseUp" @onwheel="OnMouseWheel">
                <BECanvas @ref="myCanvas" Height="950" Width="850"></BECanvas><br /><br /><br /><br />
            </div>
            <img src="Batch/@Job/@Bsn/@Phase/@_imgName" @ref="imageRef" style="display:none;" /> 

razor.cs

private ElementReference imageRef;

async Task RedrawCanvas()
{
await currentCanvasContext.ClearRectAsync(0, 0, 800, 800);

   await currentCanvasContext.SaveAsync();

   await currentCanvasContext.TranslateAsync(translateX, translateY);
   await currentCanvasContext.ScaleAsync(zoomFactor, zoomFactor);

   Console.WriteLine(imageRef.Id);
   Console.WriteLine(_imageId);
   Console.WriteLine(imageRef.Context);

   await currentCanvasContext.DrawImageAsync(imageRef, 0, 0, 800, 800);

   var rectanglesCopy = new List<Rectangle>(rectangles);

   foreach (var rect in rectanglesCopy)
   {
       // Modifica il colore del rettangolo selezionato
       if (rect.IsSelected)
       {
           await currentCanvasContext.SetStrokeStyleAsync("black");
       }
       else
       {
           await currentCanvasContext.SetStrokeStyleAsync(rect.Color);
       }

       // Ridisegna il rettangolo tenendo conto della scala e della traduzione
       await currentCanvasContext.StrokeRectAsync(rect.X, rect.Y, rect.Width, rect.Height);
   }

   await currentCanvasContext.RestoreAsync();

}

method to change image

    private async void NextImage()
    {
        if (_currentImages != _totalImages)
        {
            _currentImages += 1;
            _imgName = _imgListTest.ElementAt(_currentImages);

            await RedrawCanvas();
            StateHasChanged();
        }
    }

I believe the issue is that the imageref.Id has a single ID, and when I attempt to change the image, it doesn’t update. Could someone assist me with this? (I could provide the other methods if required)

Thank y'all