Rotate text in custom style renderer in OpenLayers?

Question

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();
            },
        });
    },
});

The result if translating and then apply rotation:

Answer 1

Call .translate(x, y) before applying rotation at the required position, and no further x, y offset is required in fillText() if it has already been translated.

            state.context.translate(x, y);
            state.context.rotate(-Math.PI / 2);
            
            state.context.fillText(`x: ${x}, y: ${y}`, 0, 0);