Thuộc tính strokeStyle của HTML Canvas

Thuộc tính strokeStyle trong Canvas dùng để đặt màu, gradient hoặc pattern cho nét vẽ (stroke). Phần tử <canvas> cho phép vẽ đồ họa bằng JavaScript.

Cú pháp

context.strokeStyle = color | gradient | pattern;

• color – Màu nét vẽ (tên màu, hex, rgb, v.v.).
• gradient – Đối tượng gradient tuyến tính hoặc bán kính.
• pattern – Đối tượng pattern tạo từ hình ảnh.

Ví dụ: Vẽ viền chữ nhật với gradient tuyến tính

<!DOCTYPE html>
<html>
<body>
  <canvas id="newCanvas" width="550" height="400" style="border: 2px solid orange;"></canvas>
  <script>
    var c = document.getElementById("newCanvas");
    var ctx = c.getContext("2d");
    // Tạo gradient tuyến tính từ (150,0) đến (280,0)
    var grad = ctx.createLinearGradient(150, 0, 280, 0);
    grad.addColorStop("0", "orange");
    grad.addColorStop("0.5", "blue");
    grad.addColorStop("1.0", "green");
    ctx.strokeStyle = grad;
    ctx.lineWidth = 20;
    ctx.strokeRect(150, 120, 240, 100);
  </script>
</body>
</html>

Kết quả: hình chữ nhật có viền dày 20px với gradient chuyển màu cam → xanh dương → xanh lá.