Canvas image gray

by MICHI CHEN

HTML

<canvas id="myCanvas" width="200" height="276"></canvas>

JavaScript

$(function(){
	function drawImg(imgObj){
  	var ctx=$('#myCanvas')[0].getContext('2d');
  	var _x=0,_y=0,_w=$('#myCanvas').width(),_h=($('#myCanvas').height()-10)/2;
    
  	ctx.drawImage(imgObj,_x,_y,_w,_h);
  	var imgData=ctx.getImageData(_x,_y,_w,_h);
    var data=imgData.data;
    console.log(data.length);
    for(var i=0;i<data.length;i+=4){
      var brightness = 0.34 * data[i] + 0.5 * data[i + 1] + 0.16 * data[i + 2];
      data[i]=brightness;
      data[i+1]=brightness;
      data[i+2]=brightness;
    };
    ctx.putImageData(imgData,_x,_h+10);
  };
	var imgObj= new Image();
  imgObj.crossOrigin='anonymous';
 	$(imgObj).load(function(){
  	drawImg(this);
  });
	imgObj.src = 'https://c2.staticflickr.com/1/437/18634993201_10aa53d5ef_k.jpg';
});