Create a curved text around an image

I modified the following code here: Example, so that I can create the following image below. However, in my current implementation the image nor the drawn alphabets are shown. What could be the issue? If I comment either one; The canvas or the Image it would show up but not together.

import QtQuick 2.15
import QtQuick.Window 2.15

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Image {
        id: abcBar
        source: "alphabetBar.png"

        Canvas{

            property string nameFont: webFont.name

            function drawTextAlongArc(context, str, centerX, centerY, radius, angle)
            {

                context.save();
                context.translate(centerX, centerY);
                context.rotate(4 * angle / 2);
                context.rotate(-1 * (angle / str.length) / 2);
                for (var n = 0; n < str.length; n++) {
                    context.rotate(angle / str.length);
                    context.save();
                    context.translate(0, -1 * radius);
                    var char1 = str[n];
                    context.fillText(char1, 0, 0);
                    context.restore();
                }
                context.restore();

            }


          anchors.fill: parent
          onPaint: {

              var ctx = getContext("2d");
              ctx.fillStyle = Qt.rgba(1, 1, 1, 1);
              ctx.fillRect(0, 0, width, height);


              ctx.font='50px Verdana'

              //ctx.font = '30px Courier New'
              ctx.textAlign = "center";

              var centerX = abcBar.width / 2;
              var centerY = abcBar.height/2; //height - 30;
              var angle   = Math.PI; // radians
              var radius  = 180;
              ctx.fillStyle="#000000"
              drawTextAlongArc(ctx, "ABCDEFGHIJKLMNOPQRSTUVWXYZ", centerX, centerY, radius, angle);

          }
        }
    }
}