ぬりぬりしたろか！

はい。背景色とかその辺の設定についてのお話です。

context.strokeStyle=ptn

線や輪郭の色を指定します。
こいつは値代入式なので注意してくださいね。
16進数カラーコードまたはRGB形式での指定ができます

var canvas1 = document.getElementById('canvas01');
canvas1.width = 200;
canvas1.height = 200;
if (canvas1.getContext) {
  var context1 = canvas1.getContext('2d');
  // 新しいパスを開始する
  context1.beginPath();

  context1.strokeStyle = '#dddddd';
  // 四角の生成
  context1.rect(30, 50, 70, 70);
  
  // 輪郭線の描画
  context1.stroke();

  // 新しいパスを開始する
  context1.beginPath();

  context1.strokeStyle = '#ff0000';

  context1.moveTo(10, 30);
  context1.lineTo(20, 70);

  // 輪郭線の描画
  context1.stroke();
}

途中でbrginPathでリセットしない場合、四角部分も#ff0000が適用されますのでご注意ください。

context.fillStyle=ptb

塗りつぶしです。
今までの例でもいっぱい使ってきました。
16進数カラーコードまたはRGB形式での指定ができます
また、グラデーションパターンを設定することもできます。
グラデーションパターンに関しては後述してます。

var canvas2 = document.getElementById('canvas02');
canvas2.width = 200;
canvas2.height = 200;
if (canvas2.getContext) {
  var context2 = canvas2.getContext('2d');
  // 新しいパスを開始する
  context2.beginPath();

  // 四角の生成
  context2.rect(70, 50, 70, 70);

  // 塗りつぶし背景色の設定
  context2.fillStyle = '#ddd';

  // 塗りつぶし
  context2.fill();

  context2.beginPath();

  // 四角の生成
  context2.rect(20, 50, 70, 70);

  // 塗りつぶし背景色の設定
  context2.fillStyle = '#333';

  // 塗りつぶし
  context2.fill();
}

context.addColorStop(offset, color)

グラデーションの色を指定します。

offset

グラデーションの開始位置を指定します。
値ｊは0.0から1.0までの間。無効な値をセットするとJSエラーになりますので注意
要するに、始点0終点1なのです。

color

グラデーションの色指定を行います。
16進数またはRGB形式での指定をおこなってください。
無効な値はエラーとなりますので注意

複数の指定

offsetの値を変えてaddColorStopメソッドを実行させます。

注意点

このメソッドはあくまでもグラデーションパターンの作成用のメソッドとなります。

context.createLinearGradient(x0, y0, x1, y1)

線形グラデーションを指定します。
[x0 y0]は始点を[x1,y1]は終点を指します。

線形グラデーションの指定順について

以下の様な組み合わせで設定を行います。

1. beginPath()でリセットをしましょう
2. createLinearGradient()で線形グラデーションを使うと宣言し、その結果を別変数にほりこみます
3. 2の変数を使ってaddColorStop()を必要なだけ実行してあげます
4. 2の変数をcontext.fillStyleにぶち込んであげます。
5. rect()で四角を描画し、fill()で背景をつければおわり

var canvas3 = document.getElementById('canvas03');
canvas3.width = 200;
canvas3.height = 200;
if (canvas3.getContext) {
  var context3 = canvas3.getContext('2d');
  // 新しいパスを開始する
  context3.beginPath();

  gradient = context3.createLinearGradient(20,20,70,70);
  gradient.addColorStop(0.0 , '#ddd');
  gradient.addColorStop(1.0 , '#fff');
  gradient.addColorStop(0.5 , 'rgb(0,255,0)');

  context3.fillStyle = gradient;

  // 四角の生成
  context3.rect(20,20,50,50);

  // 塗りつぶし
  context3.fill();
}

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

円形グラデーションを指定します。
[x0, y0, r0]は始点、円の中心を指し、[x1, y1, r1]は終了地点を指します。
ちなみに円の中心と終了地点の数値は、最初の引数0,0で円の中心ではないのでご注意

1. beginPath()でリセットをしましょう
2. createRadialGradient()で線形グラデーションを使うと宣言し、その結果を別変数にほりこみます
3. 2の変数を使ってaddColorStop()を必要なだけ実行してあげます
4. 2の変数をcontext.fillStyleにぶち込んであげます。
5. arc()で円を描画し、fill()で背景をつければおわり

var canvas4 = document.getElementById('canvas04');
canvas4.width = 200;
canvas4.height = 200;
if (canvas4.getContext) {
  var context4 = canvas4.getContext('2d');
  // 新しいパスを開始する
  context4.beginPath();

  gradient = context4.createRadialGradient(110,90,10,90,90,50);
  gradient.addColorStop(0.0 , '#fff');
  gradient.addColorStop(0.2 , '#F7BFC1');
  gradient.addColorStop(1.0 , '#F29DA4');

  context4.fillStyle = gradient;

  // 四角の生成
  var startAngle = 0 * Math.PI / 180;
  var endAngle = 360 * Math.PI / 180;
  context4.arc(70, 70, 50, startAngle, endAngle, true);

  // 塗りつぶし
  context4.fill();
}

context.createPattern(image, repetition)

背景画像のセットを行います。

image

imgのパスではなく、タグをぶっこむようです。
ちなみに指定できるのは <canvas><img><video>
の３つとなります。

repetition

cssの指定と同じです。
repeat repeat-x repeat-y no-repeat

//-------------------------------------
// 左側のcanvas
//-------------------------------------
var canvas5 = document.getElementById('canvas05');
canvas5.width = 200;
canvas5.height = 200;
if (canvas5.getContext) {
  var context5 = canvas5.getContext('2d');
  // 新しいパスを開始する
  context5.beginPath();

  var img = new Image();
  img.src = "/common/img/illust/img_logo.jpg";
  /* 画像が読み込まれるのを待ってから処理を続行 */
  img.onload = function()
  {
    context5.beginPath();
    /* パターンを生成 */
    var ptn = context5.createPattern(img, "");
    /* fillStyleにパターンをセット */
    context5.fillStyle = ptn;
    /* 円を描く */
    context5.arc(50, 50, 40, 0, 2 * Math.PI, false);
    context5.fill();
    context5.stroke();

    context5.beginPath();
    /* パターンを生成 */
    var ptn = context5.createPattern(img, "");
    /* fillStyleにパターンをセット */
    context5.fillStyle = ptn;
    /* 円を描く */
    context5.rect(100,100,80,80);
    context5.fill();
    context5.stroke();
  }
}
//-------------------------------------
// 右側のcanvas
//-------------------------------------
var canvas6 = document.getElementById('canvas06');
canvas6.width = 200;
canvas6.height = 200;
if (canvas6.getContext) {
  var context6 = canvas6.getContext('2d');
  // 新しいパスを開始する
  context6.beginPath();

  var img = new Image();
  img.src = "/common/img/illust/img_logo.jpg";
  /* 画像が読み込まれるのを待ってから処理を続行 */
  img.onload = function()
  {
    context6.beginPath();
    /* パターンを生成 */
    var ptn = context6.createPattern(img, "no-repeat");
    /* fillStyleにパターンをセット */
    context6.fillStyle = ptn;
    /* 円を描く */
    context6.rect(0,0,200,200);
    context6.fill();
    context6.stroke();
  }
}