#はじめに
qiitaってレベル高い記事が多いですよね。
「初心者向け」って記事もかなり難しいものが多いように思います。

そこで、入門者向けのcanvasの記事を書いてみようと思います。

簡易ペイント作成をゴールにします。
これが全部できれば、
「canvas？知ってますよ！canvasでペイント作ったことありますよ。」ってイキれます(笑)

#リンク
ここから問題のページへ飛べるようにしておきます。
###基本編
問題1 塗りつぶそう
 問題2 線分を描こう
 問題3 三角形を描こう
 問題4 三角形を塗りつぶそう
 問題5 五角形を描こう
 問題6 五角形を塗りつぶそう
 問題7 円を描こう
 問題8 円を塗りつぶそう
 問題9 画像を貼りつけよう
###イベント・アニメーション編
問題10 円をボタンを押して動かそう
 問題11 円をタイマーで動かそう
 問題12 円をマウスドラッグで動かそう
###画像処理編
問題13 グレースケールしてみよう
 問題14 2値化してみよう
 問題15 モザイクしてみよう
###卒業編
問題16 マウスドラッグで線を引いてみよう
 問題17 マウスクリックで四角形を作成してみよう
 問題18 canvasに描いた内容を保存、復元してみよう
 問題19 簡易ペイントを作ってみよう

#対応ブラウザ
Google Chromeのみ。
Chrome以外でも動くかもしれませんが

#前提知識
HTMLがちょっと分かる。
JavaScriptがちょっとわかる(for文,if文が理解できるぐらい)
jQueryでイベント処理できる。(ボタンをクリックした処理が描ける程度)
これぐらい方を対象にしています。

#canvasってどう書くの？

htmlファイルに以下のように書きます。

<canvas></canvas>

明示的にサイズ指定する場合は、以下のように書きます。

<canvas width="500" height="300"></canvas>

通常、スタイルではなくプロパティのwidth,heightを使います。

#canvasって何ができるの？
線分を書いたり、多角形を塗りつぶしたり、画像を貼りつけたりすることができます。
また、行列を使って描いたものを平行移動、回転、拡大ができます。

#ゴール
最終的に作ることになる「簡易ペイント」の仕様を記載します。
・マウスドラッグで線分群が描けること
・マウスクリックで四角形が作成できること
・マウスクリックで円が作成できること
・線分群、四角形、円の色を選択できること
・線分群、四角形、円の太さを選択できること
・四角形、円がマウスドラッグで動かせること
・四角形、円が削除できること
・描いた内容を保存できること
・保存した内容を復元できること

今はできる気がしないかもしれませんが、頑張っていきましょう。