Как перенести только изображение по горизонтали, а не canvs?

Question

Можно ли переворачивать горизонтально изображение, которое содержится в холсте, но не в холсте.

У меня есть холст с sevral изображениями.

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

Demo jsFiddle

У меня есть этот код:

var canvas = document.getElementById('myCanvas'); 
     var context = canvas.getContext('2d'); 
     var x = 10; 
     var y = 10; 
     var width = 200; 
     var height = 137; 
     var imageObj = new Image(); 

     imageObj.onload = function() { 
     context.translate(width, 0); 
     context.scale(-1, 1); 
     context.drawImage(imageObj, x, y, width, height); 
     }; 
     imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg'; 

Эти линии:

context.translate(width, 0); 
     context.scale(-1, 1); 

переворачивать изображение и холст togther.

Я хочу сделать Somthing так:

imageObj.translate(width, 0); 
imageObj.scale(-1, 1); 

, как это сделать? Большое спасибо.

Answer 1

Это приведет к повороту контекста, когда вы нарисуете изображение, а затем восстановите его.

var canvas = document.getElementById('myCanvas'); 
     var context = canvas.getContext('2d'); 
     var x = 10; 
     var y = 10; 
     var width = 200; 
     var height = 137; 
     var imageObj = new Image(); 

     imageObj.onload = function() { 
     context.save(); 
     context.translate(width, 0); 
     context.scale(-1, 1); 
     context.drawImage(imageObj, x, y, width, height); 
     context.restore(); 
     }; 
     imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';