Rendering effects to images
This recipe shows the various effects that can be applied to an image. The output of the recipe is as shown here:
How to do it
The recipe is as follows:
The HTML code:
<html> <head> <title>Image</title> <script src="ImageEffects.js"></script> </head> <body onload="init();"> <center> <canvas id="MyCanvasArea" width="650" height="450" style="border:2px solid blue;" > your browser does not support canvas</canvas> <h1>Image Effects-normal,negative,gryascale,red,sepia& noise</h1> </center> </body> </html>
The JavaScript code:
var can;var ctx;var boyimage;var x,y;var imageData;var imgPixels;
var red;var green;var blue;var alpha;var avg;
function init(){
can = document.getElementById('MyCanvasArea'),
ctx = can.getContext('2d');
x=10;y=10;
var imageObj=new Image();
imageObj.src="goodmorning.jpg";
imageObj.onload=function(){
ctx.drawImage(imageObj,x,y,200,200...
