キャンバスにヒーローを選択する方法を教えてください。

Question

私はHeroをキャンバスに持っています。どのように私はそれを選択し、コンテキストメニューを開きますか？

クラスイメージは、このメソッドが含まれていないbecuse私は、唯一のキャンバスにリスナーを追加します。

シンプルコード：

context.drawImage(hero, heroX, heroY); 
context.globalCompositeOperation = "destination-in"; 
context.drawImage(mask, heroX, heroY); 
context.globalCompositeOperation = "destination-over"; 

function getElementPosition(obj) { 
    var curleft = 0, 
     curtop = 0; 
    if (obj.offsetParent) { 
     do { 
      curleft += obj.offsetLeft; 
      curtop += obj.offsetTop; 
     } while (obj = obj.offsetParent); 
     return { 
      x: curleft, 
      y: curtop 
     }; 
    } 
    return undefined; 
} 

canvas.addEventListener('mousemove', function(evt) { 
    var mousePos = getMousePos(canvas, evt); 
    var message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y; 
    var elementPos = getElementPosition(hero); //doesn't work 
    alert(elementPos.x); 
}, false); 

Answer 1

あなたが主人公の座標を格納し、MouseMoveのコールバックでそれらをチェックする必要があります。 offsetLeftとoffsetTopはDOM要素で機能し、キャンバスに描画されたピクセルでは機能しません。

あなたが提供したコードからより正確な回答を得ることはできません。 heroXとheroYのようなものを使うべきですが、何を見ていなくても、伝えるのは不可能です。