HTML5 Canvas, text with transform, how?

Question

JavaScript

The task is to distribute the text over 8 sectors of the drum and, when the background image is rotated, rotate this text with the background synchronously. In the script file (see example ) On line 67 I do an array traversal with these values, and display the desired text. But it is problematic to draw this text evenly. The background image already contains some values, but this is not an option, since these numbers are dynamic, and constantly drawing a picture is not an option. Thank you.

Вот из строки 67: на картинке красным обвел, то что получилось

//    ВЫВОД И ТРАНСФОРМИРОВАНИЕ ТЕКСТ
prizes.forEach(function (value, key) {
    surfaceContext.save();
    surfaceContext.font = 'normal 28px Sans-Serif';
    //surfaceContext.rotate(Math.PI / 2 * rotate);
    surfaceContext.rotate(rotate);
    surfaceContext.translate(0, 0);
    surfaceContext.textAlign = "right";
    surfaceContext.fillText(value.name, labelXposition, labelYposition);
    labelXposition = labelXposition + 30;
    labelYposition = labelYposition - 30;
    //rotate = rotate + 2;
    newy = newy + 20;
    newx = newx + 20;
    surfaceContext.restore();
});

Answer 1

Long story short, here's what I did in a hurry. Colors, number of beats, text, etc. can be easily adjusted.
https://jsfiddle.net/twobomb/jfdkn12w/