Gradient có thể được dùng để tô màu cho các dạng hình học như hình chữ nhật, hình tròn, đường thẳng, văn bản,
Để sử dụng gradient trong bạn có thể thực hiện theo các bước sau đây:
Bước 1: Chọn loại gradient. Có hai loại gradient khác nhau dùng trong tô màu được thể hiện qua hai phương thức sau đây:
ØPhương thức createLinearGradient[x,y,x1,y1] dùng để tạo gradient dạng thẳng
ØPhương thức createRadialGradient[x,y,r,x1,y1,r1] dùng để tạo gradient dạng cong.
Bước 2: Xác định các điểm dừng màu sắc. Để xác định các điểm dừng màu sắc của gradient ta cần sử dụng phương thức addColorStop[]. Các điểm dừng màu sắc của gradient nằm trong đoạn [0-1].
Bước 3: Sử dụng thuộc tính fillStyle hoặc strokeStyle để yêu cầu gradient tương ứng, rồi sau đó vẽ các hình dạng mong muốn.
Ví dụ 1:Sử dụng phương thức createLinearGradient[] để vẽ gradient dạng thẳng.
Trình duyệt này không hỗ trợ phần tử canvas.
var i=0;
function draw4[]{
var c=document.getElementById["myCanvas"];
var ctx=c.getContext["2d"];
// Tạo gradient
var grd=ctx.createLinearGradient[0,0,200,0];
grd.addColorStop[0,"red"];
grd.addColorStop[1,"white"];
// Vẽ hình
if[i