Delayed webcam to canvas

by velthune

HTML

<script src="https://raw.github.com/mrdoob/three.js/master/src/Three.js"></script>
    <div id="container"></div>
 <canvas  id="cid" style="border: 5px solid black;" onclick="hover()" width="350" height="350"></canvas>

JavaScript

function getPosition(e) {

    //this section is from http://www.quirksmode.org/js/events_properties.html
    var targ;
    if (!e)
        e = window.event;
    if (e.target)
        targ = e.target;
    else if (e.srcElement)
        targ = e.srcElement;
    if (targ.nodeType == 3) // defeat Safari bug
        targ = targ.parentNode;

    // jQuery normalizes the pageX and pageY
    // pageX,Y are the mouse positions relative to the document
    // offset() returns the position of the element relative to the document
    var x = e.pageX - $(targ).offset().left;
    var y = e.pageY - $(targ).offset().top;

    return {"x": x, "y": y};
};

// now just make sure you use this with jQuery
// obviously you can use other events other than click
$(cid).hover(function(event) {
    // jQuery would normalize the event
    position = getPosition(event);
    //now you can use the x and y positions
    
    var canvas = document.getElementById("container");
    canvas.innerHTML="X: " + position.x + " Y: " + position.y;
});