步驟

1. 建立路徑
   beginPath()
2. 設定線條寬度（可省）
   lineWidth=”5″
3. 設定顏色（可省）
   strokeStyle=”green”
4. 開始
   moveTo(0, 100)
5. 結束
   lineTo(300, 100)
6. 畫出線來
   stoke()

範例

canvas#canvas(width="300", height="150")

const ctx=canvas.getContext("2d");
canvas.width=window.innerWidth;
canvas.height=window.innerHeight;

//draw a line
ctx.beginPath();//start to draw a line
ctx.lineWidth="5";//set line width
ctx.strokeStyle="green";//set color
ctx.moveTo(0, 100);//start point
ctx.lineTo(300, 100);//end point
ctx.stroke();//draw it

Display