Các thuộc tính fillStyle và strokeStyle thường sẽ được sử dụng để vẽ hình họa, vì nó cho phép thay đổi màu sắc trên các yếu tố của một bản vẽ. Màu sắc sẽ được sử dụng rất nhiều trong việc vẽ đồ họa. Dùng cho fillStyle, strokeStyle, dùng cho việc định màu gradients, background image... Hệ màu trong Canvas cũng được sử dụng giống như hệ màu của CSS.
Ví dụ: context.fillStyle = “blue”; // fill màu xanh context.strokeStyle = “#aaa”;// stroke màu gray
Giá trị mặc định ban đầu của fillStyle và strokeStyle là #000000. Các trình duyệt hiện tại hỗ trợ CSS3 thì còn hỗ trợ cho một số các hệ mày nữa: RGB, RGBA,
HSL, HSLA. Dưới đây là một số các ví dụ màu cơ bản:
"#f44" // Hexadecimal RGB value: red "#44ff44" // RRGGBB value: green
"rgb(60, 60, 255) " // RGB as integers: blue
"rgb(100%, 25%, 100%) " // RGB as percentages: purple "rgba(100%,25%,100%,0.5) " // Plus alpha 0-1: translucent
"rgba(0,0,0,0) " // Transparent black "transparent" // Synonym for the above
"hsl(60, 100%, 50%) " // Fully saturated yellow "hsl(60, 75%, 50%) " // Less saturated yellow "hsl(60, 100%, 75%) " // Fully saturated, lighter "hsl(60, 100%, 25%) " // Fully saturated, darker "hsla(60,100%,50%,0.5) " // 50% opaque
Nếu muốn là việc với độ mờ của màu, độ mờ của ảnh hay những mẫu hình họa, cũng có thể thêm một thông số cho việc làm mờ hình ảnh đó, thông số đó là
globalAlpha. globalAlpha có giá trị chạy trong khoảng 0-1. với 0 là giá trị làm cho
hình ảnh bị ẩn đi, và 1 là hình ảnh được hiển thị rõ nhất. Mọi các pixel ảnh đều được hiển thị với một giá trị của globalAlpha, và giá trị mặc định cho nó là 1.
Fill và stroke sử dụng mẫu hình họa làm background cho hình ảnh, và sẽ sử dụng
phương thức createPattern() để thực hiện đặt nền cho ảnh. Var img = document.getElementById(“image”) ;
context.fillStyle = context.createPattern(img,”repeat”) ; thông số thứ nhất của createPattern() là dùng để lấy hay xác định ảnh mà muốn để đặt màu background cho nó, thông số thứ hai “repreat” để phủ đầy hình ảnh, còn có các thông số khác như: no-repeat, repeat-x, repeat-y.
Hình 9: Pattern và gradients