Where's Waldo?

gistfile1.txt

var Waldo = Waldo || {};
Waldo.logging = true;
(function () {
    var keys = {

    };
    var el = document.getElementsByTagName('canvas');
    var that = this;
    var Mouse = {};

    if (el) {
        for (var x = 0; x < el.length; x += 1) {
            if ('undefined' !== typeof el[x]) {
                el[x].onmousemove = function (event) {
                    that.Mouse[event.target.id] = {
                        x: event.pageX - this.offsetLeft,
                        y: event.pageY - this.offsetTop
                    };
                }
                el[x].onclick = function (event) {
                    show(event);
                }
            }
        }

    } else {
        show("Can't find a canvas call on this page");
    }

    function show(event) {
        var mouse = Mouse[event.target.id];
        if ( !! Waldo.logging) {
            console.log("#" + event.target.id, mouse.x, mouse.y);
        }
        var style = {
            cursor: 'pointer',
            textAlign: 'left',
            listStyle: 'none',
            font: 'bold 15px "Lucida Grande"',
            backgroundColor: 'rgba(0, 0, 0, 0.8)',
            color: '#fff',
            BorderRadius: '5px',
            MozBorderRadius: '5px',
            WebkitBorderRadius: '5px',
            borderTop: 'solid 1px rgba(255, 255, 255, 0.4)',
            borderLeft: 'solid 1px rgba(0, 0, 0, 0.8)',
            borderRight: 'solid 1px rgba(0, 0, 0, 0.8)',
            borderBottom: 'solid 1px #000',
            textShadow: '0 1px 0 #000',
            BoxShadow: '0 -1px 0 #000',
            MozBoxShadow: '0 -1px 0 #000',
            WebkitBoxShadow: '0 -1px 0 #000',
            position: 'fixed',
            padding: '10px',
            margin: '0',
            right: '10px',
            'top': '10px',
            zIndex: 1000
        };
        var el = document.getElementById('_waldo');
        if (el) {
            el.parentNode.removeChild(el);
        }
        var props = {
            id: '_waldo',
            innerHTML: "#" + event.target.id + ': ' + mouse.x + ',' + mouse.y,
            onclick: function () {
                this.parentNode.removeChild(this);
            }
        };
        for (var key in props) {
            el[key] = props[key];
        }
        for (var key in style) {
            el.style[key] = style[key];
        }
        var el = document.createElement('div');
        document.body.appendChild(el);
    }
})()