スタートページJavascriptCANVAS

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


目的・機能

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

例1

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

例2

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


例1の説明

関数A1のソースリスト


function 関数A1() {
    var canvas = document.getElementById("キャンバス1"); // ★A
    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();
}

関数B1のソースリスト


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

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

例2の説明

関数A2のソースリスト


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

    // 関数Bの呼出し
    関数B2("キャンバス1");

}

関数B2のソースリスト


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

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

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

関数Bでの
  // 表示場所への表示
  document.getElementById("結果表示場所").innerHTML
    = "x=" + mouseX + ", y=" + mouseY + ", rgba=" + rgba;

の部分を、
  return [ x, y, rgba ];
として、関数Aで
  var [ x, y, rgba ] = 関数B2("キャビネット1");
としたのではエラーになります。おそらく return がイベントループ内にあるのが原因だと思うのですが・・・。