代碼段

 can2_context.beginPath();
 can2_context.rect(10,10,100,100)
 can2_context.stroke();

//  can2_context.beginPath()
 can2_context.rect(50,50,100,100)
 can2_context.stroke()

上面這段代碼：先調用beginPath()來清楚當前路徑中的所有子路徑，然后調用rect()來創(chuàng)建一條包含矩形4個點的子路徑，再調用stroke()方法使得這個矩形出現(xiàn)在canvas上。
接下來這段代碼再次調用rect()方法，不過這一次，由于沒有調用beginPath()方法清除原有的路徑，所以第二次對rect()的方法的調用，會向當前中增加一條子路徑。最后該段代碼再一次調用stroke()方法。這次stroke()方法的調用，將會使得當前路徑中的兩條子路徑都被描邊，這意味著它會重繪第一個矩形
效果如圖