Sau khi nắm ba bài vẽ đường thẳng, đường cong và đường cong phức tạp bây giờ chúng ta bắt đàu làm bài tập thực hành kết hợp ba bài này để vẽ những đường mà chung ta muốn.

Chúng ta có thể nối những đường vễ từ cách phương thức đã học thành một đường. Điểm kết thúc của đường này sẽ là điểm bắt đầu của đường tiếp theo. Với mỗi phương thức beginPath() là một đường vẽ, nếu bạn không muốn vẽ nối tiếp đường hiện tại bạn có thể gọi beginPath() để báo hiệu một đường vẽ mới.

Cú pháp:
 
1

context.beginPath();
 

Ví dụ minh họa:

HTML: <canvas id="myCanvas" width="578" height="200"></canvas>

Javascript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

window.onload = function(){
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
 
    context.beginPath();
    context.moveTo(100, 20);
    context.lineTo(200, 160); // line 1
    context.quadraticCurveTo(230, 200, 250, 120); // quadratic curve
    context.bezierCurveTo(290, -40, 300, 200, 400, 150); // bezier curve
    context.lineTo(500, 90); // line 2
    context.lineWidth = 5;
    context.strokeStyle = "#0000ff";
    context.stroke();
};

Kết quả:

Hình giải thích:

HTML5 Canvas Path