HTML Canvas fill() মেথড

Canvas fill() মেথড

HTML Canvas-এ fill() মেথডটি বর্তমান ড্রইং পাথ (current drawing path) কে ফিল (পূরণ) করতে ব্যবহৃত হয়। ডিফল্ট রঙ কালো (#000000)। fillStyle প্রোপার্টি দিয়ে রঙ, গ্রেডিয়েন্ট বা প্যাটার্ন পরিবর্তন করা যায়।

সিনট্যাক্স

ctx.fill();

উদাহরণ

<!DOCTYPE html>
<html>
<body>
  <canvas id="myCanvas" width="450" height="250" style="border:2px solid blue;">
    আপনার ব্রাউজার HTML5 canvas ট্যাগ সাপোর্ট করে না।
  </canvas>
  <script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.beginPath();
    ctx.rect(50, 60, 300, 200); // আয়তাকার পাথ তৈরি
    ctx.fillStyle = "green";    // ফিল রঙ সেট
    ctx.fill();                 // পাথ ফিল করা
  </script>
</body>
</html>

আউটপুট

কীভাবে কাজ করে?

1. beginPath() — নতুন পাথ শুরু
2. rect(x, y, w, h) — আয়তাকার পাথ ডিফাইন (আঁকা হয় না, শুধু পাথ তৈরি)
3. fillStyle — ফিল স্টাইল সেট (রঙ, গ্রেডিয়েন্ট, প্যাটার্ন)
4. fill() — পাথটি ফিল করে

fill() vs fillRect()

গ্রেডিয়েন্ট ফিল উদাহরণ

var gradient = ctx.createLinearGradient(0, 0, 200, 0);
gradient.addColorStop(0, "blue");
gradient.addColorStop(1, "red");
ctx.fillStyle = gradient;
ctx.fill();