Line goes to slightly left between two points on image in asp.net blazor

Question

I am using Graphics class to draw line between two points on an image. I think I got the right point but when I draw a line between two points I Got a line but the line slightly left than the actual points. I don't know the reasons. Please note that I did similar things in WPF but it works fine but in ASP.NET blazor I got the problem.

Here is my code:

<div>
    <img height="700" width="700" src="/print/rifat.jpg"  @onmousedown="@Mouse_Down1"   />
</div>

Here is My C# Code

protected async Task Mouse_Down1(MouseEventArgs e)
    {
       // var ee=e.
        var filepath = "wwwroot\\print\\rifat.jpg";
        Bitmap bmp = (Bitmap)Image.FromFile(filepath);
       
        double x2;
        double y2;
       // var result = await JSRuntime.InvokeAsync<BoundingClientRect>("MyDOMGetBoundingClientRect", MyElementReference);
        if (!ist1)
        {
            x11 = e.ClientX;
            y11 = e.ClientY;
        }
        else
        {
            x2 = e.ClientX;
            y2 = e.ClientY;
            using (Graphics graphics = Graphics.FromImage(bmp))
            {
                using (Pen redPen = new Pen(Color.Red, 10))
                {
                    graphics.DrawLine(redPen, Convert.ToInt32(x11), Convert.ToInt32(y11), Convert.ToInt32(x2), Convert.ToInt32(y2));
                    var path = SaveImage1(bmp);
                }
            }

        }
        ist1 = true;

    }

The line is slightly left than the actual points, I do not the reason.

Answer 1

Have you tried Apps Script Triggers? Maybe the function onEdit(e) can help: https://developers.google.com/apps-script/guides/triggers