$ outside of jQuery
<p>This app <a href="https://developer.mozilla.org/en-US/demos/detail/meet-me-there/launch" rel="nofollow">https://developer.mozilla.org/en-US/demos/detail/meet-me-there/launch</a> accepts uploaded photos, attaches a qr code to them, and then allows you to share them. I've attached below the JavaScript for everything except the QR functionality. The app doesn't use jQuery, but at the beginning it assigns a function to the $. </p>

<pre><code>  window.onload = function(){
                    var $ = function(id){
                            console.log(id);
                            return document.getElementById(id);
                        },
</code></pre>

<p>When I run the app with the console.log in the above position, it shows that quite a few 'ids' are getting passed through that console.log(id). As the file loads, it logs 'surface', 'cam' and 'upload' and, as you engage the app, it logs 'result', 'sharer', 'uploadedURL' and many others. Problem is that I don't see how everything keeps getting passed through that function for the console.log to log the different 'id's at that point in the code. Therefore, I wonder what the significance of '$' is in this context (no jQuery). Specifically, by creating that '$' function, is it called anytime that any of the other events with $ are run, such as <code>$('upload').onclick = function(){...</code>   </p>

<p>Is it working similar to how adding a prototype is working in jquery by using <code>$.prototype.function()</code> in jquery. If so, where does it get this functionality from if there's no jQuery. </p>

<pre><code>window.onload = function(){
                var $ = function(id){
                        console.log(id);
                        return document.getElementById(id);
                    },
                    canvas = $('surface'),
                    ctx = canvas.getContext('2d'),
                    watcher, loc='No location provided', located;

                $('cam').onchange = function(event){
                    console.log(event);
                    console.trace();
                    var files = event.target.files,
                        file;

                    if (files &amp;&amp; files.length &gt; 0) {
                        file = files[0];
                        try {
                        var URL = window.URL || window.webkitURL || window.mozURL;
                        var imgURL = URL.createObjectURL(file);

                        var img = new Image();
                            img.id = "tester";

                        //Load it onto the canvas
                        img.onload = function() {
                            console.trace();

                            canvas.width = this.width;
                            canvas.height = this.height;
                            $('info').innerHTML = ("Width: " + this.width + "px, Height: " + this.height + "px");
                            $('result').width = 400;
                            $('result').height = (400 / (this.width/this.height)) &gt;&gt; 0;
                            ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
                            var codeSize = (canvas.height/4) &gt;&gt; 0;
                            var imgn = new Image(); 
                            imgn.onload = function(){
                                ctx.drawImage(imgn, (canvas.width-5- codeSize), (canvas.height-5-codeSize), codeSize, codeSize);
                                $('result').src = canvas.toDataURL();
                            }
                            imgn.src = (QR.encode(loc, codeSize, 5));
                        }

                        img.src = imgURL;

                        } catch (e) {
                            console.log("error: " + e);
                        }
                    }
                },
                // borrowed this functionality from cgack's demo
                // https://developer.mozilla.org/en-US/demos/detail/snap-and-share 
                $('upload').onclick = function(){
                    $('infomsg').style.display = 'block';
                    var url = "http://api.imgur.com/2/upload.json",
                    params = new FormData(),
                    http = new XMLHttpRequest();

                    params.append('key','29a8b1db1d8fda0df87006def2307242');
                    params.append('image',canvas.toDataURL().split(',')[1]);

                    http.open("POST", url);
                     http.onload = function() {
                        var url = JSON.parse(http.responseText).upload.links.imgur_page;
                        $('uploadedUrl').href = url;
                        $('uploadedUrl').innerHTML = url;
                        $('shareFb').href = ("http://www.facebook.com/sharer.php?u="+url);
                        $('shareTwitter').href = ("http://twitter.com/intent/tweet?url="+url);
                        $('sharer').style.display = 'block';
                         $('infomsg').style.display = 'none';

                    };
                    http.send(params);
                    console.log(params);
                };
                watcher = navigator.geolocation.watchPosition(function(position){
                    console.trace();
                    console.log("navigator"); 
                    loc = "geo:" + position.coords.latitude + "," +position.coords.longitude;
                    located = true;
                }, function(error){
                    if(error.code == error.PERMISSION_DENIED || error.code == error.POSITION_UNAVAILABLE)
                        alert('damn, we were not able to locate you. sorry.');
                    }
                );
            };
</code></pre>
