Drawing. Enhancing the Generalized

Example F.6. animatec.html
<!doctype html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>Canvas, Draw on It</title>
        <style>
            #canvas { border: 2px solid blue; }
        </style>
        <script src='nQuery.js'></script>   <!-- access to framework -->
        <script>
            'use strict';
            let Canvas = {
                init(canvasId, color) {             // note new syntax
                    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);
                },
                getContext() {
                    return this.context;
                }
            }

            let initialize = () => {                // note new syntax
                let canvas = Object.create(Canvas);
                canvas.init('canvas', '#ccc');
                let context = canvas.getContext();
                context.beginPath();
                context.fillStyle = '#f00';
                context.arc(100, 100, 20,
                                 0, Math.PI * 2,
                                 false);
                context.fill();
                context.closePath();
            }

            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!