clickCanvas：クリックによる座標・色の取得

目的・機能

canvas の任意の個所をクリックすると、その点の x. y座標と色を取得して表示します。
座標、色を戻り値の変数として取り出したいのですが、現在、成功していません。

例１

関数Ａでcanvasを定義して、その後buttonでクリック機能を追加する関数Ｂを起動します。
一度関数Ｂを起動すれば、何度もクリックできます。

例２

関数Ａから関数Ｂを呼び出します。このほうが関数Ｂの汎用性が高くなります。

例１の説明

関数Ａ１のソースリスト


function 関数Ａ１() {
    var canvas = document.getElementById("キャンバス１"); // ★Ａ
    var ctx = canvas.getContext("2d");
    // 初期クリア
    ctx.clearRect(0, 0, 299, 149);
    document.getElementById("結果表示場所").innerHTML ="";
    // 画像の作成
    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.lineTo(0, 149);
    ctx.lineTo(199, 149);
    ctx.closePath();
　　ctx.fillStyle = "rgba(255,0,0,0.7)";
　　ctx.fill();
    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.lineTo(199, 0);
    ctx.lineTo(199, 149);
    ctx.closePath();
　　ctx.fillStyle = "rgba(0,0,255,0.7)";
　　ctx.fill();
}

★Ａの「キャンバス１」はＨＴＭＬで定義しています。
「初期クリア」は例１⇔例２の残留結果を消すためだけの操作です。
「画像の作成」はcanvasに簡単な画像を描くだけのものです。

関数Ｂ１のソースリスト


function 関数Ｂ１() {
    var canvas = document.getElementById("キャンバス１"); // ★Ｂ
    var ctx = canvas.getContext('2d');

    canvas.onclick =  function(e) {                      // クリックしたときの処理
        // ===== クリック点の座標
        var rect = e.target.getBoundingClientRect();     // ★Ｃ 
        var mouseX = e.clientX - Math.floor(rect.left);  // ★Ｄ
        var mouseY = e.clientY - Math.floor(rect.top);
        // ==== RGBAの取得
        var imagedata = ctx.getImageData(mouseX, mouseY, 1, 1); // ★Ｅ
        var r = imagedata.data[0];                       // ★Ｆ
        var g = imagedata.data[1];
        var b = imagedata.data[2];
        var a = (imagedata.data[3]/255).toFixed(1);      // ★Ｇ
               // rgbaの透明度は 0～1 で表示するため
        var rgba = "rgba(" + r + "," + g + "," + b +"," + a +")";
        // 表示場所への表示
        document.getElementById("結果表示場所").innerHTML
            = "x=" + mouseX + ", y=" + mouseY + ", rgba=" + rgba; 
    }
}

★Ｂ：関数Ａで canvas に描いた情報をそのまま引き継ぎます。すなわち、関数Ａと関数Ｂがcanvas を仲介にして情報を共有していることになります、
★Ｃと★Ｄ：われわれが欲しいのは、「canvas上のマウス座標」です。ところが、クリックした点であるe.clientX,Yは、「window上のマウス座標」で、canvasの位置とは無関係な値です。それで、window画面におけるcanvas の左上端の微小長方形の座標を得るのがrectです。
すなわち、★Ｄは「canvas上のマウス座標 = window上のマウス座標 – canvasの左上の座標」を求めてmouseX,Y にしているのです。
★Ｅと★Ｆ：クリックした点の１ピクセル正方形の色データです。r,g,b,a が各１バイトで構成され、０～２５５の強度で表現されています。
★Ｇ：どころがrgbaの表記では、透過率aは０～１で表示することになっています。ここでは小数点以下１桁にしています。

例２の説明

関数Ａ２のソースリスト


function 関数Ａ２() {
    var canvas = document.getElementById("キャンバス１");
    var ctx = canvas.getContext("2d");
    // 初期クリア
    ctx.clearRect(0, 0, 299, 149);
    document.getElementById("結果表示場所").innerHTML ="";
    // 画像の作成
        :
        :

    // 関数Ｂの呼出し
    関数Ｂ２("キャンバス１");

}

関数Ａ１に赤の部分を追加しただけです。「画像の作成」の前に挿入しても同じです。
これにより、"キャンバス１"を引数として、関数Ｂを呼び出します。

関数Ｂ２のソースリスト


function 関数Ｂ２(キャンバス名) {
    var canvas = document.getElementById(キャンバス名);
    var ctx = canvas.getContext('2d');
         :
         : 以降、関数Ｂ１と同じ
         :
}

関数Ｂの結果を変数で受け取ることに失敗

私としては、関数Ｂの結果を引数として関数Ａに戻したいのです。そうすれば、クリックによりcanvasを動的に変化させることができます。
この機能はゲームでは基本的なものであり、解説も多いのですが、理解できていません。

関数Ｂでの
　　// 表示場所への表示
　　document.getElementById("結果表示場所").innerHTML
　　　　= "x=" + mouseX + ", y=" + mouseY + ", rgba=" + rgba;
の部分を、
　　return [ x, y, rgba ];
として、関数Ａで
　　var [ x, y, rgba ] = 関数Ｂ２("キャビネット１");
としたのではエラーになります。おそらく return がイベントループ内にあるのが原因だと思うのですが・・・。