How can I position a BABYLON.GUI.Image?

Question

I want to display a babylon image but I can't position it, because a BABYLON.GUI.Image doens't seem to have properties like x, y or position.

const advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI");
const image = new BABYLON.GUI.Image("but", "bvtech_logo.jpg");
image.width = "300px";
image.height = "100px";
//The following 2 lines don't work
image.x = 10;
image.y = "10px";
advancedTexture.addControl(image);

Answer 1

You must use the properties left and top. The problem is that you have to remenber that if you say image.left = 0 it means that the center of the image is at the center of the canvas. So if you want the top left corner of the screen to be the origin (0, 0) you must use a utility function

const positionImage = (image, x, y) => {
    const canvas = document.getElementById('myCanvas');
    image.left =  - canvas.width / 2 + image.width / 2 + x;
    image.top =  - canvas.height / 2 + image.height / 2 + y;
};

positionImage(myImage, 10, 10);