How to implement image fragment rotation in Javascript?

Question

JavaScript

Good afternoon!
There is a need to rotate a fragment of the image. I know that there is a drawimage and transform function, but I don't know how to use them to extract, rotate and only then draw an image. Those. all this needs to be done "in the air" and without the use of additional canvas'ov.

Answer 1

function alteration(mdo, x1, y1, x2, y2) {//преобразование изображений: индекс преобразования, координаты исходного и конечного изображения
var imd_mod = buffme.createImageData(ncs, ncs);//imagedata модифицируемого фрагмента
var imd_src = buffme.getImageData(ncs * (x1 - 1), ncs * (y1 - 1), ncs, ncs);//imagedata из исходного изображения
var wi = he = ncs; //размеры фрагмента
var vc, hc, ac1, ac2, ac3, c;//варианты преобразований
//расчёт координат пикселей
br = {
1: c   = 'i * wi + j', //стандартные координаты пикселей
2: ac1 = '(j + 1) * wi - i - 1', //поворот на 90гр по часовой //j+1 опускает картинку вниз до упора, i-1 влево
3: ac2 = 'hvc = (he - i) * wi - j - 1', //поворот на 180гр по часовой //j - 1 влево до упора
4: ac3 = '(wi - j - 1) * he + i', //поворот на 270гр по часовой //j - 1 вверх до упора
5: vc  = '(i + 1) * wi - j - 1', //отражение по вертикали //i+1 опускает картинку вниз до упора, j-1 влево
6: hc  = '(he - i - 1) * wi + j' //отражение по горизонтали //-i-1 поднимает картинку вверх до упора
};
for (var i = 0; i < he; i++) {
for (var j = 0; j < wi; j++) {
for (var p = 0; p < 4; p++) { //номер субпикселя(p:0,1,2,3):r-0,g-1,b-2,alpha-3
oble = 4 * eval(br[1]) + p; //расчёт оригинальных субпикселей
ble = 4 * eval(br[mdo]) + p; //расчёт нового положения субпикселей
imd_mod.data[ble] = imd_src.data[oble] //копирование (суб)пикселей в новые кооординаты в новой переменной
}}}
buffme.putImageData(imd_mod, ncs * (x2 - 1), ncs * (y2 - 1));
}

I had to resort to creating a second canvas, unfortunately :(
But it works!
By the way, the transformations are humanly done using matrices. If someone writes, I will be grateful
after all the transformations on the canvas began to look like this

Answer 2

Alternatively, create a new element with the same image, but cropped as you like. Move it and rotate it over the previous one.