Canvasの画像にフィルターを掛けたい

こちらのサイトを参考にfilterで画像を編集できるボタンを作っています。

var can = $("#drawarea")[0];
var context = can.getContext("2d");


$("#select").on("change",function(){
 var fileList = this.files ;
 if( 1 > fileList.length ){
  return false ;
 }
 var file = fileList[0] ;
 var fr = new FileReader() ;
 //読み込み後の処理
 fr.onload = function(){

  //[Image]クラスを起動
  var image = new Image() ;

  //読み込み完了後の処理
  image.onload = function(){

   //キャンパスに描画処理
   if ( can.getContext ) {

    //キャンパスのコンテキスト
    var context = can.getContext( "2d" ) ;

    //画像サイズを取得
    var width = this.width ;
    var height = this.height ;

    //キャンパスのサイズを決めておく
    can.width = 600 ;
    can.height = 315 ;

    //キャンパスにイメージを描画する
    context.drawImage( this , 0, 0 , width , height , 0 , 0 , 600 , 315 );

   }

  }

  //画像を読み込む
  image.src = this.result ;

 }

 //ファイルを[base64エンコード]として読み込む
 fr.readAsDataURL( file ) ;
});



Filters = {};

var grayscale = function(){
    
      }

Filters.getPixels = function(img) {
  var c = this.getCanvas(img.width, img.height);
  var ctx = c.getContext('2d');
  ctx.drawImage(img);
  return ctx.getImageData(0,0,c.width,c.height);
};

Filters.getCanvas = function(w,h) {
  var c = document.createElement('drawarea');
  c.width = w;
  c.height = h;
  return c;
};

Filters.filterImage = function(filter, image, var_args) {
  var args = [this.getPixels(image)];
  for (var i=2; i<arguments.length; i++) {
    args.push(arguments[i]);
  }
  return filter.apply(null, args);
};

Filters.grayscale = function(pixels, args) {
  var d = pixels.data;
  for (var i=0; i<d.length; i+=4) {
    var r = d[i];
    var g = d[i+1];
    var b = d[i+2];
    // CIE luminance for the RGB
    // The human eye is bad at seeing red and blue, so we de-emphasize them.
    var v = 0.2126*r + 0.7152*g + 0.0722*b;
    d[i] = d[i+1] = d[i+2] = v
  }
  return pixels;
};

can.addEventListener("click", function(){
      grayscale();
}, false);

<canvas id="drawarea" width="500" height="300" style="border:1px solid black;"></canvas>

<input type="file" id="select">

<button onclick = "grayscale()">グレーボタン</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

ただ、ボタンを押してもconsole上でエラーが出力され、つまずいています。

グレーボタンが押されたときのアクションをどのように記述すればよいでしょうか？

よろしくお願いします。