figma API relativeTransformArray

Question

const doc = {
  width: 300,
  height: 600,
  children: [
    { type: "RECTANGLE", x: 100, y: 100, width: 100, height: 100, fill: "red" },
    {
      type: "RECTANGLE",
      x: 100,
      y: 400,
      width: 100,
      height: 100,
      fill: "red",
      relativeTransformArray: [
        [0.7071067690849304, 0.7071067690849304],
        [-0.7071067690849304, 0.7071067690849304, 0, 0]
      ]
    }
  ]
};

const canvas = document.querySelector('canvas')
const ctx = canvas.getContext('2d')

canvas.width = doc.width;
canvas.height = doc.height;

var pos = {
  x: 365,
  y: 0
};

doc.children.forEach((doc) => {
  if (doc.relativeTransformArray) {
    ctx.save();
    ctx.translate(pos.x, pos.y);
    ctx.transform(...doc.relativeTransformArray.flat());
  }
  switch (doc.type) {
    case "RECTANGLE":
      ctx.fillStyle = doc.fill;
      ctx.fillRect(doc.x, doc.y, doc.width, doc.height);
      break;
    default:
  }
  if (doc.relativeTransformArray) {
    ctx.restore();
  }
});

<canvas></canvas>

The code shows a simplification of a document returned by the Figma API. The relativeTransformArray is a result of a 45deg rotation on the second red RECTANGLE.

What I can't figure out is the ctx.translate() to apply prior to the ctx.transform(...relativeTransformArray). Trial and error in this case results in needing a translateX + 365.

Is there any documentation / guidance available ?

Thanks in advance.