クリックしたところのピクセル値を取得できない

element"aaa"をグレースケールで描画したelement"c1"をクリックした時、そこの座標の階調値を得ることができません。どこを押しても"undefined"と表示されてしまいます。
どなたか原因を教えてもらえませんか？
下記にプログラムを記載しておきます。
よろしくお願いします。
///javascript///
var a=0;
var b=0;
var x,y;

(function (event){ 
    //elementをid="aaa"に設定 
    var element = document.getElementById("aaa");
    //マウスを押すたびに実行される関数 
    function MouseDownFunc(event){ 
    //右ボタンのみ反応 
    if(event.button == 0){ 
        //クリック時のx座標
        a=event.x; 
        //クリック時のy座標
        b=event.y; 
    }
    } 
    // イベントリスナーに対応している 
    if(element.addEventListener){ 
        // マウスのボタンを押すと実行されるイベント 
        element.addEventListener("mousedown" , MouseDownFunc); 
        // アタッチイベントに対応している 
    }else if(element.attachEvent){ 
        // マウスのボタンを押すと実行されるイベント 
        element.attachEvent("onmousedown" , MouseDownFunc); 
    }
})();

onclick = function(event) { 
draw();};
 
function draw() {
    //"c1"から要素を取得する 
    var canvas = document.getElementById('c1'); 
    if ( ! canvas || ! canvas.getContext ) { return false; } 
    var ctx = canvas.getContext('2d'); 
    //Imageオブジェクトを生成 
    var img = new Image(); 
    //元になる画像 
    img.src = "/sub/map.jpg"; 

    //画像が読み込まれるのを待ってから処理を続行  
    img.onload = function() {
        //画像の幅
        var width = img.width;
        //画像の高さ
        var height = img.height;
        //img.srcの指定座標を表示 
        ctx.drawImage(img, a, b, 500, 300, 80, 60, 300, 200);
        var imageData = ctx.getImageData(500,500,img.width,img.height);
        var pix = imageData.data;
        //グレースケール化した輝度値の格納する配列 
        var gray = new Uint8ClampedArray(width*height);
        //型付き配列
        var result = new Uint8ClampedArray(imageData.data.length);
        for( y = 0; y<height; y++){
            for( x = 0; x<width; x++){
                //1次元配列の場所を計算
                var i = (y * width + x)*4;
                //グレースケールの計算
                gray[i/4] = 0.30*pix[i+0] + 0.59*pix[i+1] + 0.11*pix[i+2];
                result[i+0] = gray[i/4];
                result[i+1] = gray[i/4];
                result[i+2] = gray[i/4];
                result[i+3] = pix[i+3];
            }
        }
        //imageDataに結果を設定する
        imageData.data.set(result);
        //画像の描画
        ctx.putImageData(imageData,500,500);
        
        
        (function (){ 
        //elementをid="c1"に設定 
        var element = document.getElementById("c1");
        //マウスを押すたびに実行される関数 
        function MouseDownFunc(event){ 
        //右ボタンのみ反応 
        if(event.button == 0){
            document.write("<p>"); 
            document.write(gray[s/4]);
            document.write("</p>");
        }
        } 
        // イベントリスナーに対応している 
        if(element.addEventListener){ 
            // マウスのボタンを押すと実行されるイベント 
            element.addEventListener("mousedown" , MouseDownFunc); 
            // アタッチイベントに対応している 
        }else if(element.attachEvent){ 
            // マウスのボタンを押すと実行されるイベント 
            element.attachEvent("onmousedown" , MouseDownFunc); 
        }
        })()};;}