Paste code

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Sample 1 get image data</title>
<link rel="stylesheet" type="text/css" href="css/styles.css">
<style>
#myCanvas {
 border:1px solid #9c9898;
 
 }
</style>
</head>


<body>
<canvas id="myCanvas" width="578" height="400">
</canvas>
[removed]
 function drawImage(imageObj) {
 var canvas=document.getElementById('myCanvas');
 var context=canvas.getContext('2d');
 
 var imageX=69;
 var imageY=50;
 
 var imageWidth= imageObj.width;
 var imageHeight= imageObj.height;
 
 context.drawImage(imageObj, imageX, imageY);
 
 var imageData= context.getImageData( imageX, imageY, imageWidth, imageHeight );
 var data = imageData.data;
 
 for(var i=0, n= data.lenght; i<n; i+=4) {
  var red = data [i];
  
  var green = data [i+1];
  
  var blue = data [i+2];
  var alpha = data [i+3];
  }
  
 for (var y=0; y<sourceHeight; y++) {
  
 for (var x=0; x<sourceWidth; x++) {
  var red = data [((sourceWidth*y)+x)*4];
  
  var green = data [((sourceWidth*y)+x)*4+1];
  
  var blue = data [((sourceWidth*y)+x)*4+2];
  var alpha =data [((sourceWidth*y)+x)*4+3];
  }
 }
 
 
 context.putImageData(imageData, imageX, imageY); 
 
 }
 var imageObj= new Image();
  imageObj. () {
  
  drawImage(this);
  };
  imageObj.src = 'images/1.jpg';
 
[removed]
</body>
</html>