canvas要素はグラフィックを描くのに特化しており、無色透明な領域です.ページに「キャンバス」を置くのと同じで、グラフィックを描くことができますが、マウスで描くのではなくjavascriptで描くスクリプトを書く必要があります.
canvas要素はID、width、heightの3つの属性を指定する必要があります.

a drawing of something

canvas要素を使用するには、widthとheightのプロパティを設定する必要があります.開始ラベルと終了ラベルに表示される内容はバックグラウンド情報で、ブラウザがcanvas要素をサポートしていない場合は、これらの情報が表示されます.
長方形を描くには
1)canvas要素のDOMオブジェクトを取得する.
2)コンテキストを取得する;
グラフィックコンテキストは、多くの描画機能をカプセル化したオブジェクトです.canvasオブジェクトのgetContextメソッドを使用してグラフィックコンテキストを取得する必要があります.
3)枠線の塗りつぶしと描画
描画の2つの方法:枠線の塗りつぶしと描画.
塗りつぶし:グラフィックの内部を塗りつぶすことを指します.
枠線の描画:図面の内部を埋めないで、図面の外枠だけを描画します.
4)描画スタイルの設定
図形描画スタイル:主に図形の色に対して;
塗りつぶしスタイル(Fillstyle)
枠線のスタイル-strokeStyle(枠線に入力された色)
5)線幅の指定
グラフィックコンテキストオブジェクトのlineWidthプロパティを使用して、グラフィックボーダーの幅を設定します.
6)長方形を描く
FillRect(x,y,width,height):長方形を塗りつぶします.
strokeRect(x,y,width,height):長方形の枠線を描画します.

   
   
  
  

	function draw(id){
		var canvas=document.getElementById(id);
		if (canvas==null) {
			return false;
		}
		var context=canvas.getContext("2d");
		context.fillStyle="#EEEEFF";
        context.fillRect(0, 0, 400,300);
        context.fillStyle="red";
        context.strokeStyle="blue";
        context.lineWidth=1;
        context.fillRect(50,50,100,100);
        context.strokeRect(50,50,100,100);
	}
  
  
  
canvas