Why does Canvas change the position and size of elements?

Question

C++ / C#

The top picture is the layout of the application. At the bottom of the running application.
It can be seen that the buttons are shifted down and the size of the form is reduced. The Canvas container is used for positioning.

Usually other containers are used (sharing the Grid window). But this is a test case. And, as you can see, Canvas does not work correctly - that is, it does not fulfill its purpose - hard (absolute) positioning of elements.

Why does Canvas change the position and size of elements?

App.xaml (clean project without code and additions 1 Canvas and 2 Button )

<Window x:Class="wpf4.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:wpf4"
        mc:Ignorable="d"
        Title="MainWindow" Height="200" Width="400" WindowStartupLocation="CenterScreen" ResizeMode="NoResize">
    <Grid>

        <Canvas Background="Green">
            <Button Content="Button" Canvas.Left="10" Canvas.Top="141" Width="75"/>
            <Button Content="Button" Canvas.Left="159" Canvas.Top="94" Width="75"/>
        </Canvas>

    </Grid>
</Window>

Answer 1

It is unfortunate that no one has been able to give a complete answer to my question. The question is simple enough.
The answer has been given on stackoverflow. I'll write it here.
It is necessary not only to specify the size of the container (Grid, Canvas as mentioned above)
Height="420" Width="790"
but to specify the "size" of the window as
SizeToContent="WidthAndHeight"
Roughly speaking, the window will "wrap" the container (Grid, Canvas). Then there will be no glitches, offsets, etc.
Specifying the window size, as in WinForms, fixed
Height="200" Width="400"
is not entirely correct. Indeed, in WPF this size is allocated for the entire window. And it consists of a title, borders, buttons, icons. And these elements, depending on user settings, may have different sizes. And such a window can shift/overlap the content. Therefore, a window is best used as a "wrapper" for your content.

Answer 2

The designer does not display the top bar. The elements themselves are in their places, with the given sizes. Whatever the markup goes, set the size of the Canvas.

You can see in the image that if you set the Canvas to the size of the window, it will go beyond the window area.
If you want the button to be on the bottom, its position must be anchored to the bottom border, not the top.
If you want to the top, then to the top border.
If you want to center, then there is a parameter to center, or specify as a percentage.
In fact, the problem here is not in the designer, but in your lack of understanding of how it works. Read more theories, understand other people's code, and practice.