First Step

Example F.3. animatea.html
<!doctype html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>Canvas Test</title>
        <style>
            #canvas { border: 2px solid blue; }
        </style>
        <script>
            'use strict';
            let $ = function(foo) {                 // save keystrokes
                return document.getElementById(foo);
            }

            let initialize = function () {
                let canvas = $('canvas');
                let context = canvas.getContext("2d");
                context.fillStyle = '#ccc';
                context.fillRect(0, 0, canvas.width, canvas.height);
            }

            let nml = 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!