HTML Canvas rect() মেথড

Canvas rect() মেথড

HTML Canvas-এ rect() মেথড একটি আয়তাকার পাথ (rectangular path) তৈরি করতে ব্যবহৃত হয়। এটি শুধু পাথ তৈরি করে — আঁকা বা ফিল করার জন্য পৃথক stroke() বা fill() কল করতে হয়।

সিনট্যাক্স

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

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

উদাহরণ

<!DOCTYPE html>
<html>
<body>
  <canvas id="myCanvas" width="450" height="350" style="border:2px solid blue;">
    আপনার ব্রাউজার HTML5 canvas ট্যাগ সাপোর্ট করে না।
  </canvas>
  <script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    // বড় আয়ত
    ctx.beginPath();
    ctx.rect(100, 60, 200, 200);
    ctx.fillStyle = "orange";
    ctx.fill();
    // ছোট আয়ত (নেস্টেড)
    ctx.beginPath();
    ctx.rect(110, 90, 180, 120);
    ctx.fillStyle = "yellow";
    ctx.fill();
  </script>
</body>
</html>

আউটপুট

rect() vs fillRect() vs strokeRect()

জটিল শেপের জন্য rect()

rect() ব্যবহার করে জটিল শেপ (L-শেপ, C-শেপ ইত্যাদি) বানাতে পারেন একাধিক rect কল করে এবং পাথে fill() বা stroke() একবার কল করে।