【実行画面】
  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 で width と height を指定して、キャンバスを定義します(単位は px)。
    何も設定しない場合はデフォルト値として「width="300" height="150"」となります。
  3. canvas { border ・・・ } でキャンバスの枠を表示します。
    必要が無ければ省略してもかまいません。
  4. getElementByID('mycanvas'); でキャンバスを取得します。
    canvas.getContext('2d'); で、描画コンテキストを取得します。
    '2d' は、左上を基点とする二次元座標系です。

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