本能の赴くままに線を引くのが芸術らしいけどようわからん

四角形はペペッとやってくれました。
それ以外で自由に描画を行う方法をやっていきましょう。

概念的な感覚だと、都度開始点終了点を決めて、線を引く(下書きってかこうしたいねって想定みたいな)を繰り返して
最後にその通り描画させる感じです。うーん　ややっこしい

context.beginPath()

現在のパスをリセットする際に使用します。
現在のパス・・・・？
パスって何・・・？

パスとは

基本的に、パス、つまり好きな所に点を置いて、それをつなげていくってのが基本的な描画方法です。
で、その点の事を所謂パスと呼ばれます。
beginPathは描画前のパスを全部消します。

context.moveTo(x, y)

まず絵を描く時には、どこからスタートするの？を決めてあげましょう。
引数はみりゃわかんだろ！！！！(謎切れ)

context.lineTo(x, y)

moveToで指定した地点からどの位置まで線を引くかをきめます。
ちなみにこのx yに関しては常にcanvasの左上から行われる事に注意してください。

context.closePath()

開始座標と最終座標を結んでパスを閉じます。

context.stroke()

実際に線を描画します。

線描画の流れについて

線描画のための基本的なメソッドはまずはここまで。
実際に直線を描画するには以下の流れとなります。

beginPathでまずはリセット
moveToで開始点を決める
lineToで開始点からどこまで線を引くか決める
strokeで実線を引く

var canvas = document.getElementById('canvas01');
if (canvas.getContext) {
  var context = canvas.getContext('2d');
  // 新しいパスを開始する
  context.beginPath();
  // 100 30の位置に筆を置く
  context.moveTo(100,30);
  // 100 70の位置まで線を引くと決める
  context.lineTo(100,70);
  // 線引いちゃう
  context.stroke();
}

別線を引きたい

パスばかり追加していくと全て繋がっちゃいます。
別線として引きたい場合は、beginPathを上手に使ってあげましょう

var canvas2 = document.getElementById('canvas02');
if (canvas2.getContext) {
  var context2 = canvas2.getContext('2d');
  // 新しいパスを開始する
  context2.beginPath();
  // 100 30の位置に筆を置く
  context2.moveTo(100,30);
  // 100 70の位置まで線を引くと決める
  context2.lineTo(100,70);
  // 線引いちゃう
  context2.stroke();

  // リセット
  context2.beginPath();
  // 100 30の位置に筆を置く
  context2.moveTo(150,50);
  // 100 70の位置まで線を引くと決める
  context2.lineTo(150,90);
  // 線引いちゃう
  context2.stroke();
}