赤い線と緑の線使って何か作って。

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

context.lineWidth=width

線の太さを指定することができます。

var canvas1 = document.getElementById('canvas01');
canvas1.width = 200;
canvas1.height = 200;
if (canvas1.getContext) {
  var context1 = canvas1.getContext('2d');
  // 新しいパスを開始する
  context1.beginPath();
  context1.lineWidth=5;
  context1.moveTo(30,30);
  context1.lineTo(60,30);
  context1.stroke();
}

context.lineCap=prm

線の両端の形状を指定する事ができます。
指定できる引数は以下です。

butt

装飾を行いません。これがデフォルト値です。

round

端っこが丸くなります。

square

端っこが四角くなります。

var canvas2 = document.getElementById('canvas02');
canvas2.width = 200;
canvas2.height = 200;
if (canvas2.getContext) {
  var context2 = canvas2.getContext('2d');
  // デフォルト
  context2.beginPath();
  context2.lineWidth=5;
  context2.lineCap = 'butt';
  context2.moveTo(30,30);
  context2.lineTo(100,30);
  context2.stroke();

  // 丸
  context2.beginPath();
  context2.lineCap = 'round';
  context2.moveTo(30,60);
  context2.lineTo(100,60);
  context2.stroke();

  // 四角
  context2.beginPath();
  context2.lineCap = 'square';
  context2.moveTo(30,90);
  context2.lineTo(100,90);
  context2.stroke();
}

context.lineJoin=prm

線の接合箇所の形状を指定する際に使用します

miter

デフォルト特に何もしません。

bevel

面取りします。

round

丸くなります。

var canvas3 = document.getElementById('canvas03');
canvas3.width = 200;
canvas3.height = 200;
if (canvas3.getContext) {
  var context3 = canvas3.getContext('2d');
  
  context3.lineWidth=10;

  // デフォルト
  context3.beginPath();
  context3.lineJoin = 'miter';
  context3.moveTo(30,30);
  context3.lineTo(100,30);
  context3.lineTo(70,60);
  context3.stroke();

  // 面取り
  context3.beginPath();
  context3.lineJoin = 'bevel';
  context3.moveTo(30,90);
  context3.lineTo(100,90);
  context3.lineTo(70,120);
  context3.stroke();

  // 角丸
  context3.beginPath();
  context3.lineJoin = 'round';
  context3.moveTo(30,150);
  context3.lineTo(100,150);
  context3.lineTo(70,170);
  context3.stroke();
}

context.miterLimit=prm

lineJoinがmiter(デフォルト)の場合尖りますが
尖り先の限界値を設定します。
限界値を超えた場合は面取りになります。

var canvas4 = document.getElementById('canvas04');
canvas4.width = 200;
canvas4.height = 200;
if (canvas4.getContext) {
  var context4 = canvas4.getContext('2d');
  
  context4.lineWidth=10;
  context4.miterLimit = 3;
  // デフォルト
  context4.beginPath();
  context4.moveTo(30,30);
  context4.lineTo(100,30);
  context4.lineTo(70,70);
  context4.stroke();

  // 面取り
  context4.beginPath();
  context4.moveTo(30,90);
  context4.lineTo(100,90);
  context4.lineTo(70,120);
  context4.stroke();

  // 角丸
  context4.beginPath();
  context4.moveTo(30,150);
  context4.lineTo(100,150);
  context4.lineTo(70,170);
  context4.stroke();
}