canvasのマークアップ

こんな風に書くと、何の内容もないカンバスを
描画することが出来る。

<canvas width=300 height=225></canvas>

styleを指定して場所だのボーダーだのを指定できる。

<canvas width=300 height=225 class=clear style="float:left"></canvas>

<canvas width=300 height=225 class=clear style="border:1px dotted;float:left">

こんな風にボーダーを指定すると、
ボーダーが描ける。

<canvas id=b width=300 height=225 style="border:1px dotted;float:left" onclick="draw_b();return false"></canvas>
<script>
  function draw_b() {
  var b_canvas = document.getElementById("b");
  var b_context = b_canvas.getContext("2d");
  b_context.fillRect(50, 25, 150, 100);
  }
</script>

こんな風にonclickで指定したものを描くと、
いろいろできます。
あと、getContextには、必ず文字列"2d"を渡さないといけない。

<canvas id=b width=300 height=225 style="border:1px dotted;float:left" onclick="draw_b();return false"></canvas>
<script>
  function draw_b() {
  var b_canvas = document.getElementById("b");
  var b_context = b_canvas.getContext("2d");
  b_context.fillStyle = "rgb(192, 80, 77)";
  b_context.fillRect(50, 25, 150, 100);
  }
</script>

あとこんな風にfillStyleを使うと色も指定できる。

入門 HTML5