How to get position of drawn rectangle on image in canvas

Question

I'm creating OCR app and my idea is to draw rectangle on a image to create bounding box from where I want to extract text from image so not to take all ocr recognized text.

I have canvas and inside it image and rectangle. The image is put by default to top=0 and left=0 and then stretched uniform to fit on the canvas so top and left still is the same. How can I get position of rectangle mapped to position on image.

With my code bellow and on result image, because I draw rectangle on canvas top of the rectangle is 100 and left 300 and. But I want to get position of rectangle on the image.

<Grid Grid.Row="1">
        <Canvas 
            Background="Aquamarine"
            x:Name="CanvasImagePreview"
            SizeChanged="Canvas_SizeChanged"
            PointerPressed="Canvas_PointerPressed"
            PointerReleased="Canvas_PointerReleased"
            PointerMoved="Canvas_PointerMoved"
            >
            <Image x:Name="ImagePreview"
                   Width="{Binding Path=ActualWidth, ElementName=CanvasImagePreview}" 
                   Height="{Binding Path=ActualHeight, ElementName=CanvasImagePreview}" 
                  Stretch="Uniform"/>
           
            <Rectangle 
                x:Name="BoudingBox_Rect"
                RadiusX="10"
                RadiusY="10"
                StrokeThickness="3"
                Stroke="Red"
                Visibility="Collapsed"
                />
        </Canvas>
    <Grid/>

result image

Answer 1

By testing, we cannot get the actual size of image when the image is stretched to fill the Canvas panel by using the {Binding} extension to set the Width and Height property. The value of Width and Heigtht property of Image is actual the value of Canvas .

You need to calculate the actual size of the image based on the original size of the image which can be get from the corresponding BitmapImage . Then, get the position of rectangle on the image by calculating.

Please check the following code:

var CanvasActualHeight = CanvasImagePreview.ActualHeight;
var CanvasActualWidth = CanvasImagePreview.ActualWidth;
double visualHeight=0.0;
double visualWeight=0.0;

BitmapImage bitmapImage = (BitmapImage)ImagePreview.Source;
if(bitmapImage!=null)
{
    var originalHeight = bitmapImage.PixelHeight;
    var originalWidth = bitmapImage.PixelWidth;
    
    if((CanvasActualHeight / originalHeight) >(CanvasActualWidth / originalWidth))
    {
        visualHeight = originalHeight* CanvasActualWidth / originalWidth;
        visualWeight = CanvasActualWidth;
    }
    else
    {
        visualHeight = CanvasActualHeight;
       visualWeight = originalWidth * CanvasActualHeight / originalHeight;
    }
}

var relativeToCanvasTop = BoudingBox_Rect.Margin.Top;
var relativeToCanvasLeft = BoudingBox_Rect.Margin.Left;

var relativeToImageTop = BoudingBox_Rect.Margin.Top - (CanvasActualHeight - visualHeight)/2;
var relativeToImageLeft = BoudingBox_Rect.Margin.Left-(CanvasActualWidth - visualWeight)/2;