Cross-browser solution to replace using event.layerX and event.layerY

Question

I am trying to adapt some code from a simple application that Raphael uses to allow users to draw circles and rectangles on the canvas. (original code at https://gist.github.com/673186 )

The original code used an older version of jQuery and worked fine. See http://jsfiddle.net/GHZSd/

Using an updated version of jQuery, however, violates the example. See http://jsfiddle.net/GHZSd/1/

The reason for this is because event.layerX and event.layerY no longer defined in the new jQuery version. My question is, what code can I use to replace these values? I tried a couple of things just by doing some math operations (event.originalEvent.layerX / layerX still exists at the moment, so I'm just trying to add / subtract some things that will lead to these values), but it’s not working on the same browser yet works on all of them.

Sorry, if you asked about this before, but I could not find a specific answer to Kara or anywhere else.

Answer 1

So, I thought a little about this problem, as the Chrome team wants to remove layerX and layerY for strange reasons.

First, we need the position of your container:

 var position = $paper.offset(); 

(for those who read without a violin, $ paper is the div where the svg line will be displayed)

It gives us two coordinates, position.top and position.left , so we know where the container is on the page.

Then, when clicked, we use e.pageX and e.pageY , which are the coordinates of the page. To emulate layerX and layerY, we use (e.pageX - position.left) and (e.pageY - position.top)

Et voilà: http://jsfiddle.net/GHZSd/30/

Powered by chrome, Safari, FF and Opera.