HTML Canvas fillStyle প্রোপার্টি

Canvas fillStyle প্রোপার্টি

HTML Canvas-এ fillStyle প্রোপার্টি ড্রইং-এর ফিল রঙ, গ্রেডিয়েন্ট (gradient), বা প্যাটার্ন (pattern) সেট করতে ব্যবহৃত হয়। ডিফল্ট মান #000000 (কালো)। এটি fill(), fillRect(), fillText() ইত্যাদি মেথডে প্রয়োগ হয়।

সিনট্যাক্স

ctx.fillStyle = color | gradient | pattern;

মানসমূহ

উদাহরণ: Linear Gradient

<!DOCTYPE html>
<html>
<body>
  <canvas id="myCanvas" width="500" height="350" style="border:2px solid orange;"></canvas>
  <script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    // লিনিয়ার গ্রেডিয়েন্ট তৈরি (x1,y1 থেকে x2,y2)
    var gradient = ctx.createLinearGradient(0, 0, 130, 0);
    gradient.addColorStop(0, "blue");    // ০% - নীল
    gradient.addColorStop(0.8, "green"); // ৮০% - সবুজ
    gradient.addColorStop(1, "yellow");  // ১০০% - হলুদ
    ctx.fillStyle = gradient;
    ctx.fillRect(0, 0, 500, 350); // পুরো ক্যানভাস পূরণ
  </script>
</body>
</html>

আউটপুট

Radial Gradient উদাহরণ

var radialGrad = ctx.createRadialGradient(250, 175, 10, 250, 175, 150);
radialGrad.addColorStop(0, "white");
radialGrad.addColorStop(1, "blue");
ctx.fillStyle = radialGrad;
ctx.fillRect(0, 0, 500, 350);

Pattern (Image Repeat) উদাহরণ

var img = new Image();
img.src = 'pattern.png';
img.onload = function() {
  var pattern = ctx.createPattern(img, 'repeat'); // 'repeat', 'repeat-x', 'repeat-y', 'no-repeat'
  ctx.fillStyle = pattern;
  ctx.fillRect(0, 0, 500, 350);
};

গুরুত্বপূর্ণ নোটস

• fillStyle সেট করার পরেই fill()/fillRect() কল করুন।
• এটি কনটেক্সটের স্টেট — একবার সেট করলে পরবর্তী সব ফিল অপারেশনে প্রয়োগ হয়।
• গ্রেডিয়েন্ট/প্যাটার্ন অবজেক্ট রিয়োন্দ করা যায় (performance)।