Để dể hiểu bài này, các bạn nên đọc qua bài trước -  đường cong Quadratic. Tương tự đường cong Quadratic, nhưng đường cong Bezier được xác định bởi hai điểm điều khiển (thay vì Quadratic chỉ một)  và một điểm kết thúc. Đường cong Bezier dùng đẽ vẽ độ cong phức tạp hơn. Để vẽ đường cong Bezier chúng ta dùng phương thức bezierCurveTo().
 

Cú pháp:

1 bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endX, endY);

Sau đây là ví dụ về đường cong Bezier:

Điều không thể thiếu là chúng ta đặt thẻ Canvas vào trong body
<canvas id="myCanvas" width="578" height="200"></canvas>

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

window.onload = function(){
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
 
    context.moveTo(188, 130);
 
    var controlX1 = 140;
    var controlY1 = 10;
    var controlX2 = 388;
    var controlY2 = 10;
    var endX = 388;
    var endY = 170;
 
    context.bezierCurveTo(controlX1, controlY1, controlX2, 
        controlY2, endX, endY);
 
    context.lineWidth = 10;
    context.strokeStyle = "black"; // line color
    context.stroke();
};

Diagram:

Đường cong được kết hợp bởi hai đoạn, hai đoạn được xác định bởi điểm điều khiển 1 và 2

Như ở ví dụ này thì nếu controlY2 thấp xuống 1 chút thì chúng ta được nữa trái tim =.=.

Kết quả: