I need a Solution in Razor . I am using Asp.NET Blazor . My Task is to draw a line of two points of onmousedown event . I can get two points onmousedown event. Here is My Razor Code

  <div class="row">
    <div class="col">
        <div class="text-center dicom-image-bg" @onmousewheel="@((e) => OnMouseWheel(e))">
            @*<canvas>*@ 
            <img height="@viewModel.ImgHeightPercent" width="@viewModel.ImgWeightPercent" src="@(viewModel?.CurrImage != null? viewModel.CurrImage.Path : string.Empty)"
                 @onmousedown="@Mouse_Down" />
            
            @*</canvas>*@
            @*@onmousemove="@Mouse_Move"*@
        </div>
    </div>
</div>

Here you can see That I tried to use Canvas and inside canvas I set Image but that cause error . I think in html I could not nested image inside canvas . So How to draw a line in image . I know that I can use Graphics.DrawLine But It actually Draw inside image and it is inefficient . Because Whenever I want change point I will draw another line but previous Line would also present . I want to avoid that . Here is my C# backend or razor.cs code .

 protected void Mouse_Down(MouseEventArgs e)
    {
        
        var x1 = e.ClientX;
        var y1 = e.ClientY;

        if (X1 == 0)
        {
            X1 = x1;
            Y1 = y1;
        }
        else if (X1 > 0)
        {
            X2 = x1;
            Y2 = y1;
        }
        var geometry = new FrameGeometry(DicomDataSet);

        var patientCoord1 = geometry.TransformImagePointToPatient(new Point2(Convert.ToInt32(X1), Convert.ToInt32(Y1)));

        if (IsX1)
        {
            var patientCoord2 = geometry.TransformImagePointToPatient(new Point2(Convert.ToInt32(X2), Convert.ToInt32(Y2)));
            double distanceInMM = patientCoord1.Distance(patientCoord2);
            double DisTanceInMM = Convert.ToDouble(distanceInMM.ToString("N3"));
            Pen redPen = new Pen(Color.Red, 3);
            using (var graphics = Graphics.FromImage(BMP))
            {
                graphics.DrawLine(redPen, Convert.ToInt32(patientCoord1.X), Convert.ToInt32(patientCoord1.Y), Convert.ToInt32(patientCoord2.X), Convert.ToInt32(patientCoord2.Y));
                var path = SaveImage(BMP);
                Path = path;
            }
           // BMP = bitmap;
        }
        IsX1 = true;


        //System.Windows.Point px1 = e.GetPosition((System.Windows.Controls.Image)sender);

        //_firstPointRight = px1;

    }

Please Note that I had implemented similar things in WPF . But in HTML I think I have problem . Because in WPF XAML I can set image inside Canvas and Also there is another element name Line I just set Line.X1 , Line.Y1 and connect to LINE.X2,LINE.Y2. And this is a line . How can I do this in ASP.NET Blazor and HTML. Please Note that I am working on DICOM Project So I used fo-dicom