Zapisz płótno / obraz po zastosowaniu css

Mam proste płótno z obrazem (obraz 500x333):

<canvas id="capEdit" width="500" height="333"></canvas>

Następnie stosuję po prostu poziome odwrócenie na płótnie / obrazie przy użyciu CSS, działa idealnie

.flipH { 
    -moz-transform: scale(-1, 1); 
    -webkit-transform: scale(-1, 1); 
    -o-transform: scale(-1, 1); 
    transform: scale(-1, 1); 
    filter: 
    FlipH; 
}

Próbuję teraz zapisać obraz na płótnie Z jego odwróconym stanem, ale zapisuje on tylko oryginalny obraz, oto co próbuję:

$(document).on("click", "#applyFlip", function() { // save
        var canvas  = document.getElementById("capEdit");
        var dataUrl = canvas.toDataURL();
        $.ajax({ 
            type: "POST", 
            url: '/ajax/saveFlip.php',
            dataType: 'text',
            data: {
                base64data : dataUrl,
                imgName : imgName
            }
        }); 
    });

PYTANIA: Czy to powinno działać? Jeśli tak, to dlaczego nie? Jeśli NIE MOŻE nawet działać w ten sposób, czy istnieje sposób na osiągnięcie tych wyników? Zasadniczo, obracanie i obracanie w poziomie i pionie, a następnie zapisywanie

questionAnswers(2)

yourAnswerToTheQuestion