1. 【実行画面のソーコード】
   最近では JavaScript が幅を利かして、script と書けば JavaScript を指すようです。
   

   <canvas id="mycanvas" width="400" height="200"></canvas> <style> canvas { border: 1px solid silver; } </style> <script> var canvas = document.getElementByID('mycanvas'); var context = canvas.getContext('2d'); // 描画コンテキスト </script>

2. HTML5 の Canvas API を使用することで、現在のウインドウに動的に図形を描画することができます。
   今回は Canvas を定義しただけで、図形は描いていません。
   canvas で width と height を指定して、キャンバスを定義します(単位はピクセル)。
   サイズを省略するとデフォルト値として「width="300" height="150"」となります。
   
3. canvas { border ・・・ } でキャンバスの枠を表示します。
   必要が無ければ省略してもかまいません。
   
4. getElementByID('mycanvas'); でキャンバスを取得します。
   canvas.getContext('2d'); で、描画コンテキストを取得します。
   '2d' は、左上を基点とする二次元座標系です。
   

前田稔の超初心者のプログラム入門
超初心者のプログラム入門(JavaScript)