Flip an Image using Canvas

by Remko de Knikker

HTML

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.google.com/p/jqueryrotate/source/browse/trunk/jQueryRotate3.js"></script>
<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>
<br>
<div>
  <canvas id="canvas"></canvas>
</div>

JavaScript

var imageurl = null;
	
	$(document).ready( function() {
        
        // load default image
        imageurl = "http://idolondemand.topcoder.com/images/logo-lg.png";
        loadImage();
        
		$('#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();
	}