<script type="text/javascript"> 
window.onload = function() {
     var canvas = document.getElementById('canvas');
     /* canvas要素の存在チェックとCanvas未対応ブラウザの対処 */
     if ( ! canvas || ! canvas.getContext ) {
     return false;
     }
     var ctx = canvas.getContext('2d');
// ここに描画処理を書く
}
</script>

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

ラインを引く
ctx.save();// 描画パラメータ保存
ctx.beginPath();// 描画設定開始
ctx.lineWidth = 5;
ctx.lineTo(50, 120);
ctx.lineTo(250, 180);
ctx.stroke();
ctx.restore();// 初期化

矩形
ctx.beginPath();
ctx.strokeStyle = 'blue';
ctx.strokeRect(50, 20, 100, 100);//矩形の輪郭を描画 x, y, width, height
ctx.fillStyle = 'yellow';//塗りつぶしの色
ctx.fillRect(50, 20, 100, 100) //矩形を塗り潰し　x, y, width, height
arc円
ctx.fillStyle = 'yellow';
//x座標、y座標、半径、開始角度、終了角度、時計回りfalse/反時計回りture
ctx.arc(100, 70, 60, 0, Math.PI*2, false);

rgba(0, 0, 255, 0.2)//rgba(r, g, b, alpha)、r,g,bは0～255、alphaは0～1


円と曲線
arc(x, y, radius, startAngle, endAngle, anticlockwise)
quadraticCurveTo(cp1x, cp1y, x, y)//二次曲線をパス
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)//三次ベジェ曲線


画像ファイルを描画
var img = new Image();
 img.src = "img/yuu.gif";
 
 picture.onload =function() {
	 ctx.drawImage(img, 0, 0);
	 };  

正方形を描く
ctx.beginPath();//線を書く宣言
ctx.moveTo(50,50);//線を書き始める座標
ctx.lineTo(150,50);//終端
/* ４．３の繰り返し */
ctx.lineTo(150,150);
ctx.lintTo(50,150);
ctx.closePath();
ctx.stroke();//線を引く 実行