HTML5から追加された新機能、canvasで図形描画をするためのメソッド一覧です。

●描画メソッド一覧

window.onload = function(){
  //canvas要素のノードオブジェクト
  var canvas = document.getElementById('cv');
  //2Dコンテキスト
  var ctx = canvas.getContext('2d');

  //矩形を描く
  ctx.strokeRect(X, Y, W, H);

  //塗りつぶした矩形を描く
  ctx.fillRect(X, Y, W, H);

  //パスの定義
  ctx.beginPath();
  ctx.lineJoin = "miter"; //角の形状 miter:鋭角(default),
                            bevel:平たく, round:丸める
  ctx.miterLimit = 4;     //鋭角の度合い
  ctx.moveTo(X0, Y0);     //開始位置へ移動
  ctx.lineTo(X1, Y1);     //座標(X1,Y1)へ移動
  ctx.lineTo(X2, Y2);     //座標(X2,Y2)へ移動
  ctx.lineTo(X3, Y3);     //座標(X3,Y3)へ移動
  ctx.lineTo(X4, Y4);     //座標(X4,Y4)へ移動
  ctx.closePath();        //終点と開始点を結ぶ
  ctx.stroke();           //パス上に線を描く
  ctx.fill();             //パスの内側を塗りつぶす

  //円弧を描く
  var d0 = d0*Math.PI/180; //描画開始角度 d0
  var d1 = d1*Math.PI/180; //描画終了角度 d1
  ctx.arc(X, Y, r, d0, d1, true); //true:反時計回りで描画,
                                    false:時計回りで描画
  ctx.closePath();
  ctx.stroke();

  //ベジェ曲線を描く(1)
  ctx.beginPath();
  ctx.moveTo(X0, Y0);
  ctx.quadraticCurveTo(X1, Y1, X2, Y2);
  ctx.stroke();

  //ベジェ曲線を描く(2)
  ctx.beginPath();
  ctx.moveTo(X0, Y0);
  ctx.bezierCurveTo(X1, Y1, X2, Y2, X3, Y3);
  ctx.stroke();
  
  //直線から連なる円弧を描く
  ctx.beginPath();
  ctx.moveTo(X0, Y0);
  ctx.arcTo(X1, Y1, X2, Y2, r);
  ctx.stroke();

  //矩形部分を削除
  ctx.clearRect(x, y, w, h);

  //線の色を指定
  ctx.strokeStyle = "#ff00ff";
  ctx.strokeStyle = "red";
  ctx.strokeStyle = "rbg(255, 0, 0)";

  //線の太さを指定
  ctx.lineWidth = 10;

  //線の先端のスタイルを指定
  ctx.lineCap = "butt"; //butt:規定スタイル, round:先端を丸める,
                          square:先端を四角くする

  //塗りつぶしの色を指定
  ctx.fillStyle = "#ff00ff";
  ctx.fillStyle = "red";
  ctx.fillStyle = "rbg(255, 0, 0)";

  //半透明度を指定
  ctx.globalAlpha = 0.5;

  //塗りつぶし色と半透明度を指定
  ctx.fillStyle = "rgba(255, 0, 0, 0.5)";

  //グラデーションの定義
  var grad = ctx.createLinearGradient(X0, Y0, X1, Y1);
  grad.addcolorStop(0, "#ffff00");
  grad.addcolorStop(0.5, "#00ffff");
  grad.addcolorStop(1, "#00ff00");
  ctx.fillStyle = grad;

  //画像をロード
  var Img = new Image();
  Img.src = "xxxx.png?" + new Date().getTime();
  //画像のロードを確認して組み込み
  Img.onload = function(){
    //画像上の座標(SX,SY)から幅TW,高さTHをトリミングして、
    //canvas上の座標(DX,DY)に幅DW,高さDHで組み込む
    ctx.drawImage(Img, SX, SY, TW, TH, DX, DY, DW, DY);
  }

}

onloadイベントはjQueryの$.load(function(){…});を使ってよいでしょう。