এইচটিএমএল সিএসএস জাভাস্ক্রিপ্ট পিএইচপি এসকিউএল জেকুয়েরি বুটস্ট্রাপ সি প্রোগ্রামিং
ফোরাম
 

এইচটিএমএল <canvas> ট্যাগ


<canvas> ট্যাগের ব্রাউজার সাপোর্ট



এলিমেন্ট Google Chrome Edge/IE Mozila Firefox Safari Opera
<canvas> সকল ভার্সন সকল ভার্সন সকল ভার্সন সকল ভার্সন সকল ভার্সন




সংজ্ঞা ও ব্যবহার

স্ক্রিপ্ট(সাধারণত জাভাস্ক্রিপ্ট ব্যবহার করে) ব্যাবহার করে গ্রাফিক্স আঁকতে <canvas> ট্যাগ ব্যবহার করা হয়।

<canvas> ট্যাগ শুধুমাত্র গ্রাফিক্সের জন্য একটি কন্টেইনার। প্রকৃতপক্ষে গ্রাফিক্স আঁকতে হলে আপনাকে অবশ্যই স্ক্রিপ্ট ব্যবহার করতে হবে।



নিচের উদাহরণে <canvas> ট্যাগটি দেখানো হলোঃ

উদাহরণ

<!DOCTYPE html>
<html>
<body>

  <canvas id="canvasId">আপনার ব্রাউজারে এইচটিএমএল(৫) canvas ট্যাগ সাপোর্ট করে না।</canvas>
      
  <script>
  var c = document.getElementById("canvasId");
  var ctx = c.getContext("2d");
  ctx.fillStyle = "#cc33ff";
  ctx.fillRect(0, 0, 80, 100);
  </script>

</body>
</html>

বিঃদ্রঃ <canvas> ট্যাগ ইন্টারনেট এক্সপ্লোরার ৮ এবং আগের ভার্সনগুলোতে সাপোর্ট করে না।

ফলাফল





টীকা ও মন্তব্যঃ

  • যেসকল ব্রাউজারে <canvas> এলিমেন্ট সাপোর্ট করবে না, সেখানে <canvas> এলিমেন্টের ভিতরের লেখাগুলো প্রদর্শিত হবে।
  • <canvas> এলিমেন্ট সম্পর্কে আরো জানতে আমাদের এইচটিএমএল ক্যানভাস টিউটোরিয়াল পেজে ভিজিট করুন।
  • canvas অবজেক্টে ব্যবহৃত প্রোপার্টি এবং মেথডের একটি সম্পূর্ণ রেফারেন্সের জন্য, আমাদের এইচটিএমএল ক্যানভাস রেফারেন্স পেজে ভিজিট করুন।


এট্রিবিউট

নিচের টেবিলে <canvas> ট্যাগের এট্রিবিউট, এট্রিবিউটের ভ্যালু এবং তাদের ব্যবহার তুলে ধরা হলোঃ

এট্রিবিউট ভ্যালু বর্ণনা
height pixels ক্যানভাসের উচ্চতা নির্দিষ্ট করার জন্য ব্যবহৃত হয়।
width pixels ক্যানভাসের প্রস্থ নির্দিষ্ট করার জন্য ব্যবহৃত হয়।

<canvas> ট্যাগে গ্লোবাল এবং ইভেন্ট এট্রিবিউট সাপোর্ট করে কিনা?

গ্লোবাল এট্রিবিউট ইভেন্ট এট্রিবিউট
সাপোর্ট করে সাপোর্ট করে


<canvas> ট্যাগের ডিফল্ট স্টাইল

অধিকাংশ ব্রাউজারেই <canvas> এলিমেন্ট নিম্নলিখিত স্টাইল ভ্যালুগুলো সহকারে প্রদর্শিত হয়ঃ

canvas { 
    height: 150px;
    width: 300px;
  }


সম্পর্কিত পেজ