絵描こうと思ったのに絵の具ぶちまけてもうた

canvasです。
JS勉強のカテゴリでやったろと思ったらメソッドが多かったので、独立してます。
(自分の中で)最後の最後まで放置してやらなかったcanvas、手付けていきましょう

そもそもcanvasって？

canvasはhtml5から追加された要素で、その名の通り絵書いたりするところ！的な意味で命名されました。
このタグはかなり特殊で、子要素って概念がそもそもありません。
ではcanvasタグの属性を軽く見ていきましょう。

属性1:width

なんとこれはcanvasの幅を設定することができます！！！

属性2:height

なんとこれはcanvasの高さを設定することができます！！！

以上だ！！！ｱｲｪｪｪ

ほんとになんもないですね。見事に。
あ、id class style等くそ基本は使えますんですわよ
まぁ、つまりはですね。JSを使って座標指定してなんかする的な感じで使われます。
ただし、アニメーション機能等はないです。動かしたい場合は、都度描画をさせる必要があります
大掛かりなパラパラ漫画みたいな感じですね。

善は急げ、canvasに何か記述してみましょう。

ちなみにスタイルはしっかり当たってくれます。よかったね。

$('#canvas1Start').on('click',function(){
  var canvas = document.getElementById('canvas1');
  if (canvas.getContext) {
    var context = canvas.getContext('2d');

    //左から20上から40の位置に、幅50高さ100の四角形を描く
    context.fillRect(20,40,50,100);

    //色を指定する
    context.strokeStyle = 'rgb(00,00,255)'; //枠線の色は青
    context.fillStyle = 'rgb(255,00,00)'; //塗りつぶしの色は赤

    //左から200上から80の位置に、幅100高さ50の四角の枠線を描く
    context.strokeRect(200,80,100,50);

    //左から150上から75の位置に、半径60の半円を反時計回り（左回り）で描く
    context.arc(150,75,60,Math.PI*1,Math.PI*2,true);
    context.fill();
  }
})

なんか出てきたっすね！！！
そんなわけで、JSでごりごり描いていってあげましょう。