<img src="scream.jpg" id="scream" width="220" height="277"><br>
<br><input type="button" onClick="invert();" value="Invert"><br><br>
<b>OUTPUT:</b><br>
<canvas id="myCanvas" style="width: 220px; height: 277px;" width="220" height="277"></canvas>

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,0,0);
var imgData=ctx.getImageData(0,0,c.width,c.height);

function invert(){
	// invert colors
	for (var i=0;i<imgData.data.length;i+=4){
		imgData.data[i]=255-imgData.data[i];
		imgData.data[i+1]=255-imgData.data[i+1];
		imgData.data[i+2]=255-imgData.data[i+2];
		imgData.data[i+3]=255;
	}
	ctx.putImageData(imgData,0,0);
}
</script>