I would like to have more control of the label placement for polygon geometries in OpenLayers. In some cases, I need to rotate the Label. How does that work if I draw the style on the canvas directly? Currently, the Text just disappears if I apply rotation and the anchor of rotation

My code so far:

    const interactionLayer = new VectorImageLayer({
        source: featureSource,
        zIndex: Number.MAX_SAFE_INTEGER,
        style: (feature, resolution) => {
            return new Style({
                renderer: (pxGeometry, state) => {
                    if (!isPolygon(pxGeometry)) {
                        return;
                    }
                    const [x, y] = polylabel(pxGeometry, 1.0);
    
                    const polygon = new Polygon(pxGeometry);
    
                    const olContext = toContext(state.context);
    
                    olContext.setFillStrokeStyle(
                        new Fill({
                            color: "rgba(0,0,0,0.5)",
                        }),
                        new Stroke({
                            color: "#FF0000",
                        })
                    );
    
                    olContext.drawGeometry(polygon);
    
                    state.context.save();
                  
    				state.context.rotate(-Math.PI / 2);
                    state.context.translate(x, y);
                    
                    state.context.fillText(`x: ${x}, y: ${y}`, x, y);
    
                    state.context.restore();
                },
            });
        },
    });