HTML5 canvas with own defined objects

Question

I have a question concerning the canvas and self defined objects on a canvas. The self defined objects on the canvas are a javascript class with different attributes to make it possible to draw that javascript object several times on the canvas. So now my question is it possible to add to that javascript class an oncontextmenu. I want the following one:

If I make a right click on such a javscript class object on the canvas object a context menu should pop up.

Answer 1

You can listen for the contextmenu event on your canvas (that lets you know the right mouse button was pressed).

$("#canvas").contextmenu(function(e){handleContextMenu(e);});

function handleContextMenu(e){
  e.preventDefault();
  e.stopPropagation();

  mouseX=parseInt(e.clientX-offsetX);
  mouseY=parseInt(e.clientY-offsetY);

  // hit-test each of your objects
  // if the mouse is inside an object
  // then display your context menu

}

Then iterate through your objects and test if the mouse is inside any object.

If it is inside an object then display your context menu.

There are many google examples of presenting the actual context menu. Here's one:

http://ignitersworld.com/lab/contextMenu.html