canvas beginPath()

 先舉個簡單的例子，

var myCanvas = document.getElementById("myCanvas");
var context= myCanvas.getContext("2d");

context.beginPath();
context.moveTo(150, 50);
context.lineTo(250, 50);
context.strokeStyle = "green";
context.stroke();

context.beginPath();
context.moveTo(150, 80);
context.lineTo(250, 80);
context.strokeStyle = "yellow";
context.stroke();

context.beginPath();
context.moveTo(150, 100);
context.lineTo(250, 100);
context.strokeStyle = "blue";
context.stroke();

這個例子會從上向下依次繪製三條橫線，效果如圖：

假如去掉第三個beginPath()方法，會發現第三條線的顏色同時也繪製到第二條黃線上，這就發現beginPath()方法會讓圖形在繪製時重新找到開始點繪製而不會和之前的繪圖重疊，加上他還是很必須的。