Idenifying Usage. Generalizing

Example F.4. nQuery.js. The One and Only Framework
'use strict';
/**
 * nQuery, *the* JS Framework
 */
var $ = function (foo) {
    return document.getElementById(foo);    // save keystrokes
}

Example F.5. animateb.html
<!doctype html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>Canvas Test</title>
        <style>
            #canvas { border: 2px solid blue; }
        </style>
        <script src='nQuery.js'></script>   <!-- access to framework -->
        <script>
            'use strict';
            let Canvas = {
                init: function(canvasId, color) {
                    this.canvas = $(canvasId);
                    this.context = this.canvas.getContext("2d");
                    this.color = color;
                    this.context.fillStyle = color;
                    this.context.fillRect(0, 0, this.canvas.width, 
                                          this.canvas.height);
                }
            }

            let initialize = function () {
                let canvas = Object.create(Canvas);
                canvas.init('canvas', '#ccc');
            }

            window.addEventListener('load', initialize, false);
        </script>
    </head>
    <body>
        <section>
            <canvas id='canvas' width='400' height='400'>
                If you see this text long enough to read it,
                your browser is very old.
            </canvas>
        </section>
    </body>
</html>

Test it!