htmlに<canvas></canvas>を記述し、id、横幅(width)、高さ(height)を指定します。

<canvas id="test" width=480" height="320"></canvas>

キャンバスの操作は、コンテキストに対して行ないます。

var ctx = document.getElementById("test").getContext("2d") ;

色の指定は、cssと同じ16進数での指定、rgbでの指定(0～255)。
αを使うならrgbaで指定(透明度のαは0～1.0)。

ctx.fillStyle = "#4080c0" ;
ctx.fillStyle = "rgb(64,128,192)" ;
ctx.fillStyle = "rgba(64,128,192,0.5)" ;

事前にfillStyleで色を指定しておきます。

ctx.fillRect(始点X,始点Y,横幅,高さ) ;
ctx.fillRect(0,0,320,240) ;

beginPathでパスを開始し、moveToで始点を指定しlineToでパスを繋いで行き、closePathで閉じる。
塗りつぶしはfillで行います。輪郭(パス)の描画ならstrokeを使います。(closePathは省略可能)

ctx.beginPath() ;                       // パスの開始
ctx.moveTo(160,20) ;                    // ペンを移動
ctx.lineTo(300,220) ;                   // ラインを引く
ctx.lineTo( 20,220) ;
ctx.closePath() ;                       // パスの終了

ctx.fillStyle = "rgba(0,0,255,0.5)" ;   // 色指定
ctx.fill() ;                            // パスを使って塗りつぶし

ctx.fillStyle = "#000" ;                // 色指定
ctx.lineWidth = 8 ;                     // 線の太さ
ctx.stroke() ;                          // 輪郭の描画