<!doctype html>
  <html>
  <head>
  <meta charset="UTF-8">
  <title>HERE GOES YOUR TITLE</title>

  <script>

// DEFINE YOUR GLOBAL VARIABLES HERE

  var canvas;
  var context;

// INITIALIZE THE STARTING FUNCTION

  function setup() {
  
      canvas = document.getElementById("myCanvas");
      context = canvas.getContext("2d");
      
      // CALL SUBSEQUENT FUNCTIONS, as many as you need
      
      clear(); // COVER TRANSPARENT CANVAS
      
      draw(); // THIS IS WHERE AL HAPPENS
  
  }
  
  
function clear() { // USE THIS AREA TO MODIFY BKGD
  
  }
  
  
function draw() { 
// >>>>>>>>>>>>>>>>>>>>>>>>>> START HERE



// >>>>>>>>>>>>>>>>>>>>>>>>>> END HERE
  }
  
 </script>

</head>

<body onload="setup()">

  <canvas id="myCanvas" width="800" height="600"></canvas>
  <div id="display"></div>
</body>
</html>