canvasってなに？

いまさらここでcanvasの説明をする必要はないと思いますが、Flashや画像ソフトを使用しないでhtml（javascript）だけで図などを描画するための技術です。
またアニメーションをさせたり、写真画像の加工などもできるらしいです。
ここでは簡単な図形の描画しかやりませんが……

ベースhtml

今まではxhtmlをメインで書いていましたが、html5になるとちょっと書き方が変わるらしいです。

html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>canvas demo</title>
</head>
<body>
<canvas width="500" height="500"></canvas>
</body>
</html>

メタ情報書いてないというのもありますが、かなりすっきりした印象ですね。

で、canvasのマークアップはこうなります。

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

canvasタグはimgタグと同じ扱いらしいので、サイズはcssで指定できなかったり単位（px）をつけなかったりします。
あとタグ自体はxhtml風でも書けるというのをどこかで見たような気がしたので、下記のような感じでもいいと思います、間違ってたらすみません。

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

四角を描く

とりあえず四角を描いてみます。
ここからはjavascriptで書いていきます。

javascript
<script type="text/javascript">
window.onload = function() {
  var canvas = document.querySelector('canvas');
  var context = canvas.getContext('2d');
  context.fillRect(120, 80, 240, 100);
}
</script>

4行目までがcanvasで図形を描くための準備のようなもので、5行目の「fillRect」で四角を書いています。
引数で数値を指定することで、大きさや位置を調節します。

fillRect(x, y, width, height)

こんな感じで四角い図形が描かれます。

html5で四角

「fillRect」は塗りつぶしですが、他にも「strokeRect」で線を描いたり、「clearRect」描画を削除（クリア）などがあります。
また、基本的には後で記述した図形ほど上に重なります。

javascript
window.onload = function() {
  var canvas = document.querySelector('canvas');
  var context = canvas.getContext('2d');
  context.strokeRect(140, 100, 240, 100);
  context.fillRect(120, 80, 240, 100);
  context.clearRect(100, 60, 240, 100);
}
四角を重ねる

図形に色を塗る

塗りつぶしも線の描画もデフォルトでは黒なので、色を付けてみましょう。

javascript
window.onload = function() {
  var canvas = document.querySelector('canvas');
  var context = canvas.getContext('2d');
  context.strokeStyle = '#735E3B';  //線の色
  context.strokeRect(140, 100, 240, 100);
  context.fillStyle = '#D0A869';  //塗りつぶし色
  context.fillRect(120, 80, 240, 100);
  context.clearRect(100, 60, 240, 100);
}
四角を重ねる

図形を透明にする

図形を透明にするにはStyleで指定していた色をrbgaにします。

javascript
window.onload = function() {
  var canvas = document.querySelector('canvas');
  var context = canvas.getContext('2d');
  context.strokeStyle = 'rgba(150, 180, 90, 0.7)';  //線の色
  context.strokeRect(140, 100, 240, 100);
  context.fillStyle = 'rgba(130, 100, 160, 0.5)';  //塗りつぶし色
  context.fillRect(120, 80, 240, 100);
  context.fillStyle = 'rgba(190, 80, 70, 0.7)';  //塗りつぶし色
  context.fillRect(100, 60, 240, 100);
}
四角を透明にする

グラデーションで塗る

最後に単色で色を付けていたものをグラデーションにしてみます。

javascript
window.onload = function() {
  var canvas = document.querySelector('canvas');
  var context = canvas.getContext('2d');
  //グラデーションの設定
  var gradient = context.createLinearGradient(50, 50, 340, 50);
  gradient.addColorStop(0.0, '#5E6399');
  gradient.addColorStop(1.0, '#BA6867');
  context.fillStyle = gradient;  //塗りつぶしにグラデーションを指定
  context.fillRect(50, 50, 240, 100);
}

グラデーションは「createLinearGradient」で方向や位置を指定します。

createLinearGradient(x0, y0, x1, y0)

x0,y0からx1,y1にかけてグラデーションを指定します。
座標は絶対座標になりますので、たとえば図形の開始位置が「50,80」ならグラデーションの「x0,y0」も「50,80」という指定にすれば図形の端点からグラデーションを開始します。

「addColorStop」はカラーと位置の指定です。
グラデーションなので最低２点は必要ですね。第一引数がそのカラーが入る位置です。
サンプルでは２点ですが、例えば(0.5, ‘#fff’)とかにすれば中心に色が追加されます。

またグラデーションは円形もできます。

javascript
window.onload = function() {
  var canvas = document.querySelector('canvas');
  var context = canvas.getContext('2d');
  //円タイプのグラデーション
  var gradientR = context.createRadialGradient(400, 175, 0, 400, 175, 80);
  gradientR.addColorStop(0.0, '#BAAD56');
  gradientR.addColorStop(1.0, '#659956');
  context.fillStyle = gradientR;  //塗りつぶしにグラデーションを指定
  context.fillRect(300, 100, 200, 150);
}

円型も２点間の位置でグラデーションの方向を指定します。

context.createRadialGradient(x0, y0, r0, x1, y0, r1)

「x0, y0」「x1,y1」を同じ位置にすればとりあえず中心からグラデーションが掛かるようになりますね。

グラデーション