初心canvas-基本図形描画

まず、JqueryでDOMのcanvas要素にアクセス

var canvas = $("#myCanvas");
var context = canvas.get(0).getContext("2d");

長方形を描く

context.fillRect(x,y,width,height);

または

context.strokeRect(x,y,width,height);

x,yは始点を描く横長座標である
FillRectは塗りつぶし色の長方形(デフォルト黒)を描き、strokeRectは枠付きで塗りつぶしのない長方形を描きます.
二線引き

context.beginPath();  //    
context.moveTo(x,y);  //  
context.lineTo(x,y);  //  
context.closePath();  //    
context.stroke();   //      

三円を描く

context.beginPath();
context.arc(x,y,radius,startAngle,endAngle,anticlockwise);
context.closePath();
context.fill();

原点距離が半径で角度が開始角度の位置から始まり、終点が原点距離が半径で角度が終了角度の位置に落ちて扇形を描くことを意味します.
ここでの開始角度と終了角度は、いずれも半径とX軸との間の挟み角であり、弧度方式を採用している.
最後のパラメータはブール値で、trueは反時計回り、falseは時計回りに描画されます.
したがって、中心座標(100100)を描画し、半径50の円を次のように書くことができます.

context.arc(100,100,50,0,Math.PI*2,false);