function draw(){ var dObj = document.getElementById("tubar"); var cObj = dObj.getContext("2d"); cObj.fillStyle = "rgba(200,0,0,0.5)" cObj.fillRect(30,30,100,100); cObj.strokeRect(45,45,70,70); cObj.clearRect(50,50,60,60); }
<body onLoad="draw();">
<canvas id="canvas" width="150" height="150"></canvas><br>
</body>
cObj.fillStyle = "rgba(200,0,0,0.5)" ：定義這個canvas對象的顏色和透明度;
cObj.fillRect(30,30,100,100):繪制一個矩形，
坐標置值相對於canvas的左上原點，X軸移動30PX,Y軸移動30PX;height設置100px;width設置100px;
cObj.strokeRect(45,45,70,70):繪制一個矩形線框（里面空心的），
坐標置值相對於canvas的左上原點，X軸移動45PX,Y軸移動45PX;height設置100px;width設置100px;
cObj.clearRect(50,50,60,60); 繪制一個矩形，將cObj.fillRect的矩形的一個地方“挖空”;
坐標置值相對於canvas的左上原點，X軸移動50PX,Y軸移動50PX;height設置100px;width設置100px;
如下圖：紅色為矩形，黑色為線框，白色為“挖空”
白色“挖空”和黑色線框，定位在紅色的水平垂直居中的公式：
橫坐標=（外矩形的寬-居中元素的寬）/2 + 外矩形的橫坐標
【上例：黑色線框橫坐標：45 = （100-70）/2+30】
縱坐標=（外矩形的高-居中元素的高）/2 + 外矩形的縱坐標
【上例：黑色線框縱坐標：45 = （100-70）/2+30】