Appendix F. Masterclass: JavaScript Canvas

Table of Contents
Preparing the Domain, Best Practice
Preparing the Domain, Common
First Step
Idenifying Usage. Generalizing
Drawing. Enhancing the Generalized
Generalizing the Drawing
The Nature of Motion on the Canvas, Step 1
The Nature of Motion on the Canvas, Step 2
The Nature of Motion on the Canvas, Step 3, Bouncing
The Nature of Motion on the Canvas, Step 4, Hits?
The Nature of Motion on the Canvas, Final Step, Organizing Code
Space with an Object
Space with More Objects
Space Movie with Start/Stop
Space Movie with Working Start/Stop

Preparing the Domain, Best Practice

Example F.1. animateA.html
<!doctype html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>Canvas Test 1</title>
        <style>
            #canvas { border: 2px solid blue; }
        </style>
        <script>
            'use strict';

            let initialize = function () {
                window.alert('Just checking');
                // your code goes here
            }

            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!