HTML Canvas clearRect() মেথড

Canvas clearRect() মেথড

HTML Canvas-এ clearRect() মেথডটি একটি নির্দিষ্ট আয়তাকার এলিয়ার পিক্সেলগুলো ক্লিয়ার (transparent) করার জন্য ব্যবহৃত হয়। এটি সেই এলিয়াকে ফিরিয়ে আনে ক্যানভাসের প্রাথমিক ট্রান্সপেরেন্ট অবস্থায়।

<canvas> এলিমেন্ট JavaScript ব্যবহার করে ওয়েব পেজে গ্রাফিক্স আঁকতে দেয়। প্রতিটি ক্যানভাসের width এবং height অ্যাট্রিবিউট থাকে যা এর মাত্রা নির্ধারণ করে।

সিনট্যাক্স

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

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

প্যারামিটার	বিবরণ
x	ক্লিয়ার করা আয়তের উপরের-বাম কোণার x-কোঅর্ডিনেট
y	ক্লিয়ার করা আয়তের উপরের-বাম কোণার y-কোঅর্ডিনেট
width	ক্লিয়ার করা আয়তের প্রস্থ
height	ক্লিয়ার করা আয়তের উচ্চতা

উদাহরণ

<!DOCTYPE html>
<html>
<body>
  <canvas id="myCanvas" width="500" height="350" style="border:2px solid blue;"></canvas>
  <script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    // পুরো ক্যানভাস স্লেটি রঙে পূরণ
    ctx.fillStyle = "gray";
    ctx.fillRect(0, 0, 500, 350);
    // নির্দিষ্ট এলিয়া ক্লিয়ার করা (x=250, y=100, w=50, h=100)
    ctx.clearRect(250, 100, 50, 100);
  </script>
</body>
</html>

আউটপুট

HTML Canvas clearRect() মেথড

উপরের উদাহরণে প্রথমে পুরো ক্যানভাস স্লেটি রঙে পূরণ করা হয়েছে, তারপর clearRect(250, 100, 50, 100) কল করে মাঝপথে একটি ৫০x১০০ পিক্সেলের এলিয়া ট্রান্সপেরেন্ট করা হয়েছে।

ব্যবহারের ক্ষেত্রসমূহ

এনিমেশন ফ্রেম ক্লিয়ার করার জন্য (পূর্বের ফ্রেম মুছে নতুন ফ্রেম আঁকার আগে)
ইরেজার টুল বানাতে (ড্রয়িং অ্যাপে)
ক্যানভাসের নির্দিষ্ট অংশ রিসেট করতে