カンバスをセットして絵を書く準備をしよう

さて、canvasのメソッドをずるずるとする前に、やらないといけないことが一つ。
例えばPHPのように、<?php ?>で囲まないといけないとか
jQueryのように [$]とかを先頭につけないといけないとか
そんなルールがcanvasにもあるのです。

canvasのルール

どのcanvasなん？

まず、[どのキャンバスを使うの？]を決めないといけないですよね。
当然、canvasはhtml5のタグなので、他タグと同じくいくつも設置することができます。
なので、DOMオブジェクトを取得することがまずひとつ。
当たり前やんけ！って感じですが一応ね。

で？これどうしたいん？

さて、DOMはとれました。ですが、この状態だとブラウザの判断としては
「え？普通にDOMオブジェクト取っただけやけど？」
みたいなすっとぼけをかましてきます。つまり、この状態だとcanvasメソッドを使えることを理解できていないのです
そこで、getContextメソッドを使って教えてあげます。

  var canvas = document.getElementById('canvas1'); // この時点ではただのDOM
  var context = canvas.getContext('2d'); // ここで初めてcanvasあれこれできるようになる。

getContext('CONTEXTID')

はい、変な引数がおりますね。
今のところ・・・2Dだけ・・・？なんですかね。めいびー
まぁ、ID名でなんとなく連装できるよに、2D描画を行うことができちゃいます。
今後は3Dとか出てきそうな勢いッスね。

getContext('CONTEXTID')の補足

ちなみに、contextが取れない場合(canvasじゃないよね的な)は、NULLが返ってきます。
なので、getContextを使う場合は

  var canvas = document.getElementById('canvas1'); // この時点ではただのDOM
  if (canvas.getContext) {
    var context = canvas.getContext('2d');
  }

のようにきちんと判定して使ってあげると安全ですね！。わっしょい
まず最初のお作法が終わった所で、やってきましょう。