I'm using Google's Cloud Vision API to detect faces and landmarks within them (like eyes, nose and so on).

If the face is rotated, I'd like to correct the rotation so the face and its landmarks are positioned vertically inside a canvas element.

Google provides the coordinates of the landmarks with their origin in the top left, and roll, tilt and pan properties in degrees:

"landmarks": [
        {
          "position": {
            "x": 371.52585,
            "y": 437.1983,
            "z": 0.0012220144
          },
          "type": "LEFT_EYE"
        },
        ...

I can correct the rotation of the image by converting the roll property to radians using ctx.rotate(degrees*Math.PI/180), but how do I rotate the coordinates so they match the rotated image?

My goal is to have the image and the corresponding coordinates as follows:

Cheers