HTML Canvas fillRect() মেথড

Canvas fillRect() মেথড

HTML Canvas-এ fillRect() মেথড একটি ফিল করা আয়ত (filled rectangle) সরাসরি আঁকতে ব্যবহৃত হয়। এটি rect() + fill() এর কম্বাইনড শর্টকাট। ডিফল্ট রঙ কালো (#000000)।

সিনট্যাক্স

ctx.fillRect(x, y, width, height);

প্যারামিটারসমূহ

উদাহরণ

<!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");
    // নীল আয়ত (পুরো ক্যানভাস)
    ctx.fillStyle = "blue";
    ctx.fillRect(0, 0, 500, 350);
    // মাঝপথে একটি এলিয়া ক্লিয়ার (ট্রান্সপেরেন্ট)
    ctx.clearRect(250, 100, 50, 100);
  </script>
</body>
</html>

আউটপুট

ব্যাখ্যা

1. fillStyle = "blue" — ফিল রঙ নীল সেট
2. fillRect(0, 0, 500, 350) — পুরো ক্যানভাস নীল আয়ত দিয়ে পূরণ
3. clearRect(250, 100, 50, 100) — কেন্দ্রে ৫০x১০০ পিক্সেলের এলিয়া ক্লিয়ার (ট্রান্সপেরেন্ট)

fillRect() vs rect() + fill()

সেরা অনুশীলন

• সরল আয়তের জন্য fillRect() ব্যবহার করুন।
• জটিল পলিগন/পাথের জন্য rect()/lineTo() + fill() ব্যবহার করুন।
• fillStyle আগে সেট করুন।