Home > Articles > Web Development > HTML/CSS

  • Print
  • + Share This
This chapter is from the book

1.3. Canonical Examples in This Book

Many of the examples in this book use the following canonical form:

<!-- example.html -->

<!DOCTYPE html>
<html>
   <head>
     <title>Canonical Canvas used in this book</title>

      <style>
         ...
         #canvas {
            ...
         }
      </style>
   </head>
     <body>
         <canvas id='canvas' width='600' height='300'>
            Canvas not supported
         </canvas>

         <script src='example.js'></script>
      </body>
   </html>

  // example.js

  var canvas = document.getElementById('canvas'),
      context = canvas.getContext('2d');

  // Use the context...

The preceding example has one canvas whose ID is canvas, and it uses one JavaScript file named example.js. That JavaScript file has two variables, one for the canvas and another for the canvas’s context. The preceding example uses document.getElementById() to obtain a reference to the canvas and gets a reference to the canvas’s context.

Most applications in this book that adhere to the preceding canonical form omit the HTML listings in the interests of brevity. Likewise, for inline code listings, meaning listings like the preceding listing that do not have an Example heading, you will often see the variables canvas and context with no code showing their initialization.

Finally, again in the interests of brevity, not every example in the book is fully listed. Often examples in the book build upon one other, and when they do, you will often see the full listing for the last example and partial listings for the other related examples.

  • + Share This
  • 🔖 Save To Your Account