See the working code example on jsfiddle.
<!DOCTYPEÂ html>
<html>
<head>
<title>Flipping an Image Horizontally and Vertically</title>
<script src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
var imageurl = null;
//
$(document).ready(Â function()Â {
$('#loadimage').click(function()Â {
urlProvided();
});
$('#mirrorh').click(function()Â {
mirror(1,0);
});
$('#mirrorv').click(function()Â {
mirror(0,1);
});
});
//
function urlProvided() {
var userinput = document.getElementById('imageurl');
imageurl = userinput.value;
loadImage();
}
function loadImage(){
//
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
//
var img = new Image();
img.src = imageurl;
img.onload = function(){
ctx.drawImage(img,0,0);
};
//
var w = img.width;
var h = img.height;
canvas.width = w;
canvas.height = h;
}
//
function mirror(mirrorh,mirrorv){
//
var canvas=document.getElementById('canvas');
var ctx=canvas.getContext('2d');
//
var img = new Image();
img.src = imageurl;
//
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.save();
//
var w = img.width;
var h = img.height;
if(mirrorh){
ctx.scale(1, -1);
ctx.translate(0, -h);
}
if(mirrorv){
ctx.scale(-1, 1);
ctx.translate(-w,0);
}
ctx.drawImage(img,0,0,img.width,img.height,null,null,w,h);
ctx.save();
}
</script>
</head>
<body>
<div>
Your image URL: <input type="text" id="imageurl"></input><button id="loadimage">load image</button>
</div>
<div>
<button id="mirrorh">mirrorh</button>
<button id="mirrorv">mirrorv</button>
</div>
<div>
<canvas id="canvas"></canvas>
</div>
</body>
</html>