Generalizing the Drawing

Example F.7. animated.html

We have two things to do, assume more balls are need, or make the one we have move around on the canvas.

We must actually do both, but I decide for you, first generalize the drawing of balls, the make the movable.

<!doctype html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>Canvas, Draw Three Balls</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;
                },
                getHeight() {
                    return this.canvas.height;
                },
                getWidth() {
                    return this.canvas.width;
                }
            }

            let UFO = {
                init(canvas, color) {
                    this.canvas = canvas;
                    this.x = Math.random() * this.canvas.getWidth();
                    this.y = Math.random() * this.canvas.getHeight();
                    this.r = Math.random() * 9 + 3;
                    this.dx = Math.random() * 5;
                    this.dy = Math.random() * 5;
                    this.color = color;
                    this.draw();
                },
                draw() {
                    this.canvas.getContext().beginPath();
                    this.canvas.getContext().fillStyle = this.color;
                    this.canvas.getContext().arc(this.x, this.y, this.r,
                                                 0, Math.PI * 2,
                                                 false);
                    this.canvas.getContext().fill();
                    this.canvas.getContext().closePath();
                }
            }

            let initialize = () => {                // note new syntax
                let canvas = Object.create(Canvas);
                canvas.init('canvas', '#ccc');
                let ufo0 = Object.create(UFO);
                ufo0.init(canvas, '#f00');
                let ufo1 = Object.create(UFO);
                ufo1.init(canvas, '#080');
                let ufo2 = Object.create(UFO);
                ufo2.init(canvas, '#00f');
            }

            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!