Отразить часть html5 холста в javascript

Question

У меня нарисован элемент холста html5. Теперь мне нужно перевернуть прямоугольную angular часть этого холста по горизонтали.

Я попытался скопировать выделенную область на временный холст. Теперь мне нужен код, чтобы перевернуть этот временный холст, а затем скопировать его обратно на основной холст. Это мой код:

function swapRow(row) {
    var tempCanvas = document.createElement('canvas');
    tempCanvas.id     = "tempCanvas";
    tempCanvas.width  = 384;
    tempCanvas.height = 32;
    var tempContext = tempCanvas.getContext('2d');
    var tempImage = context.getImageData(0, 0, 384, 32);
    tempContext.putImageData(tempImage, 0, 0);

    //need code to flip tempContext
        
    tempImage = tempContext.getImageData(0, 0, 384, 32);
    context.putImageData(tempImage, 0, 0);
}

Параметр row будет использоваться, чтобы решить, какую область прямоугольника angular переворачивать, я пропустил этот logi c для ясности.

Answer 1

Мне удалось решить эту проблему.

Я пытался перевернуть свой временный холст, но мне нужно было получить изображение с временного холста, установить параметры масштабирования и вставить изображение обратно на временный холст. Я использовал toDataURL для получения изображения с холста.

function swapRow(row) {
var tempCanvas = document.createElement('canvas');
tempCanvas.id     = "tempCanvas";
tempCanvas.width  = 384;
tempCanvas.height = 384 / width;
var tempContext = tempCanvas.getContext('2d');
var tempImage = context.getImageData(30, 30 + (row * tempCanvas.height), 384, tempCanvas.height);
tempContext.putImageData(tempImage, 0, 0);
    
var myImage = new Image();
myImage.src = tempCanvas.toDataURL("image/png");
tempContext.scale(-1, 1);
tempContext.drawImage(myImage, -383, 0, 384, tempCanvas.height);
    
tempImage = tempContext.getImageData(0, 0, 384, tempCanvas.height);
context.putImageData(tempImage, 30, 30 + (row * tempCanvas.height));

}