I have a Qml Canvas Item where in, the height of canvas item keeps varying based on the input dynamically. Below is my code

```
Item {
id: barGraph

property int highestRange: 200
property int rangeVal: (RangeModel.rangeValue === "---") ? highestRange : RangeModel.rangeValue
property int totalHeight: 450
property int canvasHeight: (rangeVal * totalHeight) / highestRange

height: 700
width: 500
x: 120
y: 145

Canvas {
    id: mycanvas
    height: canvasHeight
    width: 16

    onPaint: {
        var context = getContext("2d");
        var startX = mycanvas.x;
        var startY = mycanvas.y;
        context.lineWidth = 0.5;
        context.strokeStyle = "white";

        context.beginPath();
        context.moveTo(startX, startY);
        context.lineTo(startX,(mycanvas.height - 10));
        context.lineTo(mycanvas.width, mycanvas.height);
        context.lineTo(mycanvas.width, startY + 10);
        context.lineTo(mycanvas.width / 2, startY);
        context.closePath(); // base drawn automatically
        context.fill();
        context.stroke();
    }
}}

```

The output of this code look like this :

[![canvas with full height](https://i.stack.imgur.com/pJDOm.png)](https://i.stack.imgur.com/pJDOm.png)

The problem with this code is, whenever the height of the canvas changes dynamically it actually resizes from the below position as shown in the image

[![resized canvas image](https://i.stack.imgur.com/U07QB.jpg)](https://i.stack.imgur.com/U07QB.jpg).

I actually need this to be resized from the Y top position and keeping the below position unmovable which I am unable to achieve through this code.

Any support is much appreciated here.