ক্যানভাস ইলিমেন্ট

"ক্যানভাস ইলিমেন্ট" বলতে মূলত এমন একটি টুলকে বুঝায় যার সাহায্যে ওয়েবপেজে গ্রাফিক্সের কাজ করা যায়। HTML5 এ, ওয়েব ডেভেলপারদের জন্য এটি একটি অত্যন্ত শক্তিশালী এবং বহুমুখী টুল হিসেবে বিবেচিত। এই ইলিমেন্টটি একটি নির্দিষ্ট পরিমাপের গ্রাফিক্স এলাকা তৈরি করে যেখানে জাভাস্ক্রিপ্টের মাধ্যমে বিভিন্ন ধরনের চিত্র আঁকা যায়। ক্যানভাস ইলিমেন্ট মূলত 2D গ্রাফিক্স আঁকার জন্য ব্যবহৃত হলেও, ওয়েবজিএল এর সাহায্যে 3D গ্রাফিক্স তৈরিতেও সক্ষম। ওয়েবপেজে ডাইনামিক গ্রাফিক্স এবং এনিমেশন যোগ করার ক্ষেত্রে এটি অত্যন্ত কার্যকর একটি ইলিমেন্ট। ক্যানভাস ইলিমেন্ট ব্যবহার করে ওয়েব ডেভেলপাররা ইন্টারেক্টিভ গেম, ডায়াগ্রাম, ডেটা ভিজ্যুয়ালাইজেশন ও অন্যান্য ভিজ্যুয়াল কন্টেন্ট তৈরি করতে পারেন।
ক্যানভাস ইলিমেন্ট-এর সাহায্যে পিক্সেল-ভিত্তিক গ্রাফিক্স তৈরি করা সম্ভব, যা দ্রুত পরিবর্তনশীল এনিমেশন এবং ইফেক্ট প্রদানের জন্য উপযুক্ত। এই ইলিমেন্টটির রেন্ডারিং প্রক্রিয়া JavaScript এর মাধ্যমে নিয়ন্ত্রিত হওয়ায়, কোডের মাধ্যমে এটি সহজেই আপডেট ও পরিবর্তন করা যায়। মূলত ক্যানভাস ইলিমেন্ট ওয়েব ডিজাইনে একটি নতুন যুগের সূচনা করেছে, যা পূর্বের তুলনায় অনেক বেশি গতিশীল ও আকর্ষণীয়। এবং বর্তমানে ক্যানভাস ইলিমেন্ট সকল প্রধান ব্রাউজার গুলো দ্বারা সমর্থিত।
২০০৪ সালে অ্যাপল তাদের নিজস্ব ম্যাকওএস ওয়েবকিট কম্পোনেন্টে ব্যবহারের জন্য ক্যানভাস প্রথম চালু করে। যা ড্যাশবোর্ড উইজেট এবং সাফারি ব্রাউজারের মতো অ্যাপ্লিকেশন পরিচালনার জন্য ব্যবহৃত হয়। পরবর্তীতে, ২০০৫ সালে, এটি গেকো ব্রাউজারের ১.৮ সংস্করণে গৃহীত হয়, এবং ২০০৬ সালে অপেরা ব্রাউজারে গৃহীত হয়, এবং পরবর্তী প্রজন্মের ওয়েব প্রযুক্তির জন্য প্রস্তাবিত নতুন স্পেসিফিকেশনের উপর ওয়েব হাইপারটেক্সট অ্যাপ্লিকেশন টেকনোলজি ওয়ার্কিং গ্রুপ দ্বারা মানকভাবে গৃহীত হয়।
HTML5-এর ক্যানভাস ইলিমেন্ট ওয়েবপেজে ডাইনামিক গ্রাফিক্স রেন্ডার করার একটি কার্যকর উপায় প্রদান করে। এটি একটি আয়তাকার এলাকা তৈরি করে যেখানে JavaScript ব্যবহার করে বিভিন্ন 2D আকৃতি, টেক্সট, চিত্র এবং অ্যানিমেশন আঁকা সম্ভব। যদিও codice_1 ইলিমেন্টটি নিজে কোনো গ্রাফিক্স তৈরি করতে পারে না, এটি জাভাস্ক্রিপ্ট এপিআই ব্যবহার করে অঙ্কনের জন্য একটি প্ল্যাটফর্ম সরবরাহ করে।
একটি সাধারণ ক্যানভাস ইলিমেন্ট HTML-এ নিম্নলিখিতভাবে সংজ্ঞায়িত করা হয়:
<canvas id="myCanvas" width="500" height="300"></canvas>
এই ইলিমেন্টে দুটি গুরুত্বপূর্ণ অ্যাট্রিবিউট রয়েছে:
যদি width এবং height অ্যাট্রিবিউট প্রদান না করা হয়, তবে ক্যানভাস ডিফল্ট আকার গ্রহণ করে, যা ড্রয়িং স্কেলিং সমস্যার কারণ হতে পারে।
যেহেতু ক্যানভাস ইলিমেন্ট কাজ করার জন্য JavaScript এর উপর নির্ভরশীল, তাই এমন কিছু ব্রাউজার বা ডিভাইস থাকতে পারে যেগুলি এটি সমর্থন করে না। এ ধরনের ক্ষেত্রে ফোলব্যাক কনটেন্ট ব্যবহার করা যেতে পারে:
<canvas id="myCanvas">
</canvas>
ক্যানভাসে আঁকতে হলে রেন্ডারিং কন্টেক্সট সংগ্রহ করতে হয়, যা নির্ধারণ করে যে কীভাবে আঁকা হবে। সবচেয়ে বেশি ব্যবহৃত কন্টেক্সট হল 2D রেন্ডারিং কন্টেক্সট, যা বেসিক আকৃতি, রং, টেক্সট, এবং পিক্সেল ম্যানিপুলেশন করতে দেয়। এটি JavaScript-এ নিম্নলিখিত ভাবে ব্যবহার করা হয়:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
এই "কনটেক্সট অবজেক্ট" ব্যবহার করে বিভিন্ন ড্রয়িং অপারেশন করা যায়।
2D রেন্ডারিং কন্টেক্সট বিভিন্ন অঙ্কন ফাংশন প্রদান করে, যেমন:
এই ফাংশনগুলির মাধ্যমে অ্যানিমেশন, ইন্টারঅ্যাকটিভ ভিজ্যুয়ালাইজেশন এবং গেম তৈরি করা সম্ভব হয়।
HTML5 ক্যানভাস 3D গ্রাফিক্স সমর্থনের জন্য ওয়েবজিএল ও ওয়েবজিএল২ এপিআই ব্যবহার করে। ওয়েবজিএল ক্যানভাসকে 3D গ্রাফিক্স রেন্ডার করতে সক্ষম করে, যা আধুনিক গেম ডেভেলপমেন্ট এবং ভার্চুয়াল রিয়েলিটি অ্যাপ্লিকেশনে ব্যবহৃত হয়।
2D ক্যানভাস API বিভিন্ন ধরণের অঙ্কন ফাংশন প্রদান করে, যা জাভাস্ক্রিপ্ট এর মাধ্যমে গ্রাফিক্স তৈরি করতে সহায়তা করে।
ctx.fillStyle = "blue"; 
ctx.fillRect(50, 50, 200, 100); // একটি নীল আয়তক্ষেত্র আঁকা
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(200, 200);
ctx.stroke();
ctx.font = "30px Arial";
ctx.fillText("Hello Canvas!", 100, 100);
var img = new Image();
img.src = "image.png";
img.onload = function() {
ওয়েবজিএল এপিআই ব্যবহার করে 3D গ্রাফিক্স ও গেম ডেভেলপমেন্ট করা সম্ভব। তবে এটি 2D API-এর তুলনায় বেশি জটিল এবং শেডার প্রোগ্রামিং ও জিপিইউ প্রসেসিং এর উপর নির্ভর করে। উদাহরণস্বরূপ, নিচের কোড ওয়েবজিএল রেন্ডারিং সক্রিয় করে:
প্রথমে, একটি ওয়েবজিএল ক্যানভাস তৈরি করা হয় এবং জাভাস্ক্রিপ্ট এর মাধ্যমে এটি ইনিশিয়ালাইজ করা হয়।
<canvas id="glCanvas" width="500" height="500"></canvas>
<script>
</script>
এখানে,
এই উদাহরণে আমরা একটি সাধারণ ত্রিভুজ আঁকব ওয়েবজিএল ভারটেক্স ও ফ্রাগমেন্ট শেডার ব্যবহার করে।
<canvas id="glCanvas" width="500" height="500"></canvas>
<script>
</script>
এখানে,
এই উদাহরণেওয়েবজিএল এপিআই ব্যবহার করে একটি 3D ঘনক তৈরি এবং ঘোরানো হবে।
<canvas id="glCanvas" width="500" height="500"></canvas>
<script>
</script>
এখানে,
পূর্ণাঙ্গ ঘনক তৈরি করতে হলে ভারটেক্স বাফার, শেডার ও ম্যাটিক্স ট্রান্সফরমেশন যুক্ত করতে হবে।
HTML5 ক্যানভাস ইলিমেন্টের প্রদর্শিত আকার এবং অঙ্কনের পৃষ্ঠের আকার ভিন্ন হতে পারে, যা ওয়েব গ্রাফিক্স রেন্ডারিংয়ের ক্ষেত্রে গুরুত্বপূর্ণ একটি বিষয়। ক্যানভাস ইলিমেন্টের আকার সিএসএস এর মাধ্যমে নির্ধারণ করা যায়, যেখানে অঙ্কনের পৃষ্ঠের আকার HTML অ্যাট্রিবিউটের মাধ্যমে নির্ধারণ করা হয়। যদি শুধুমাত্র CSS ব্যবহার করে ক্যানভাসের আকার পরিবর্তন করা হয়, তবে এটি স্কেলিং সমস্যার সৃষ্টি করতে পারে এবং অঙ্কনের গুণগত মান কমে যেতে পারে।
অর্থাৎ, একটি ক্যানভাসের আসলে দুটি আকার থাকে, উভয় পদ্ধতি একই চূড়ান্ত ফলাফল প্রদান করার কথা, তবে ব্যবহারের ক্ষেত্রে কিছু সূক্ষ্ম পার্থক্য রয়েছে।
<canvas id="myCanvas" width="800" height="600" style="width: 400px; height: 300px;"></canvas>
এখানে,
var canvas = document.getElementById("myCanvas");
canvas.width = 800;
canvas.height = 600;
canvas.style.width = "400px";
canvas.style.height = "300px";
এখানে,
কখন কোনটি ব্যবহার করবেন?
SVG হল ব্রাউজারে গ্রাফিক্স আঁকার একটি বিকল্প পদ্ধতি। ক্যানভাস একটি রাস্টার -ভিত্তিক প্রযুক্তি, যেখানে প্রতিটি পিক্সেল সরাসরি আঁকা হয়, তবে SVG ভেক্টর-ভিত্তিক, যেখানে প্রতিটি আঁকা আকৃতি একটি সিন গ্রাফ বা ডকুমেন্ট অবজেক্ট মডেলে হিসেবে সংরক্ষিত হয় এবং পরবর্তীতে একটি বিটম্যাপে রেন্ডার করা হয়। এর ফলে, যদি একটি SVG অবজেক্টের বৈশিষ্ট্য পরিবর্তন করা হয়, তাহলে ব্রাউজার স্বয়ংক্রিয়ভাবে সম্পূর্ণ দৃশ্যটি পুনরায় রেন্ডার করতে পারে।
অন্যদিকে, ক্যানভাস তাৎক্ষণিক মোড-এ অঙ্কন করে। উদাহরণস্বরূপ, একটি ক্যানভাসে আঁকা আয়তক্ষেত্রটি (rectangle) শুধুমাত্র ক্যানভাসে পরিবর্তন আনে এবং এর কোনো আলাদা অস্তিত্ব থাকে না। যদি এই আয়তক্ষেত্রের অবস্থান পরিবর্তন করতে হয়, তবে সম্পূর্ণ ক্যানভাস পুনরায় আঁকতে হবে, যার মধ্যে আগের সব উপাদানকেও পুনরায় অঙ্কন করতে হবে। কিন্তু SVG-এর ক্ষেত্রে, শুধু আয়তক্ষেত্রের অবস্থান পরিবর্তন করলেই ব্রাউজার স্বয়ংক্রিয়ভাবে দৃশ্যটি আপডেট করতে পারে।
SVG ব্যবহারকারীদের XML- ভিত্তিক চিত্র তৈরি ও সম্পাদনা করতে দেয়, যা বিভিন্ন XML এডিটিং টুলের মাধ্যমে সহজে নিয়ন্ত্রণযোগ্য।
SVG-এর সিন গ্রাফ বিভিন্ন ইভেন্ট হ্যান্ডলারের সাথে সংযুক্ত করা যায়, যার ফলে কোনো SVG আয়তক্ষেত্র (rectangle) একটি codice_35 ইভেন্টের মাধ্যমে প্রতিক্রিয়া জানাতে পারে। কিন্তু ক্যানভাসে একই কাজ করতে হলে ম্যানুয়ালি মাউস ক্লিকের অবস্থানকে অবজেক্টের অবস্থানের সাথে মিলিয়ে দেখতে হবে।
মূলত, ক্যানভাস একটি লো-লেভেল API, যা উচ্চ-স্তরের গ্রাফিক্স ইন্টারফেস তৈরির জন্য ব্যবহার করা যেতে পারে (যেমন, SVG সমর্থন)। কিছু JavaScript লাইব্রেরি রয়েছে, যা ক্যানভাস ব্যবহার করে SVG-এর আংশিক কার্যকারিতা প্রদান করতে পারে। উদাহরণস্বরূপ, Android 2.x-এর কিছু ব্রাউজার SVG সমর্থন করত না, কিন্তু ক্যানভাস সমর্থন করত—এ কারণে কিছু লাইব্রেরি ক্যানভাসের মাধ্যমে SVG-এর মতো ফিচার প্রদান করেছিল।
যদিও ক্যানভাস ও SVG দুইটি স্বাধীন প্রযুক্তি, কিছু সিন গ্রাফ লাইব্রেরি ক্যানভাসের জন্য উপলব্ধ রয়েছে, আবার SVG-এর মধ্যেও বিটম্যাপ সম্পাদনার কিছু ক্ষমতা রয়েছে। ফলে, এই দুই প্রযুক্তির মধ্যে পার্থক্য থাকা সত্ত্বেও কিছু ক্ষেত্রে একে অপরের পরিপূরক হিসেবেও কাজ করতে পারে।
ক্যানভাস ইলিমেন্টের প্রাথমিক প্রবর্তনের সময়, এটি ওয়েব স্ট্যান্ডার্ড কমিউনিটির মধ্যে মিশ্র প্রতিক্রিয়া পেয়েছিল। অনেকেই Apple-এর বিরুদ্ধে অভিযোগ করেছিলেন যে, তারা SVG স্ট্যান্ডার্ডকে সমর্থন করার পরিবর্তে একটি নতুন মালিকানাধীন ইলিমেন্ট তৈরি করেছে। এছাড়াও, ক্যানভাসের সিনট্যাক্স সংক্রান্ত কিছু উদ্বেগ ছিল, যেমন নেমস্পেসের (namespace) অনুপস্থিতি। 
১৪ মার্চ ২০০৭ সালে, WebKit ডেভেলপার ডেভ হায়াট Apple-এর সিনিয়র পেটেন্ট কাউন্সেল হেলেন প্লটকা ওয়ার্কম্যান,-এর একটি ইমেইল ফরোয়ার্ড করেন। এই ইমেইলে বলা হয়েছিল যে, Apple WHATWG-এর "Web Applications 1.0" ওয়ার্কিং ড্রাফটের (24 মার্চ ২০০৫ তারিখের সংস্করণ) "Graphics: The bitmap canvas", শিরোনামের 10.1 অনুচ্ছেদে বর্ণিত সমস্ত মেধাস্বত্ব সংরক্ষণ করছে। তবে, তারা যদি এই স্পেসিফিকেশন কোনো আনুষ্ঠানিক পেটেন্ট নীতিমালা সহ একটি স্ট্যান্ডার্ড সংস্থায় স্থানান্তর করা হয়, তাহলে পেটেন্ট লাইসেন্সিংয়ের জন্য দরজা খোলা থাকবে।
এই ঘোষণার ফলে ওয়েব ডেভেলপারদের মধ্যে ব্যাপক আলোচনা সৃষ্টি হয় এবং WHATWG-এর পেটেন্ট নীতির অভাব নিয়ে প্রশ্ন ওঠে, বিশেষ করে যেখানে World Wide Web Consortium (W3C) স্পষ্টভাবে রয়্যালটি-মুক্ত লাইসেন্সের (royalty-free licenses) পক্ষে ছিল। পরবর্তীতে, Apple W3C-এর রয়্যালটি-মুক্ত পেটেন্ট লাইসেন্সিং শর্তে ক্যানভাস সম্পর্কিত তাদের পেটেন্ট প্রকাশ করে। এর ফলে, যদি ক্যানভাস ইলিমেন্ট ভবিষ্যতে HTML ওয়ার্কিং গ্রুপের মাধ্যমে W3C-এর কোনো সুপারিশ হিসাবে স্বীকৃত হয়, তাহলে Apple বাধ্য থাকবে বিনামূল্যে পেটেন্ট লাইসেন্স সরবরাহ করতে।
Canvas fingerprinting হল ব্রাউজার ফিঙ্গারপ্রিন্টিং কৌশলগুলোর একটি অংশ, যা HTML5 ক্যানভাস ইলিমেন্ট ব্যবহার করে অনলাইন ব্যবহারকারীদের ট্র্যাক করার জন্য ওয়েবসাইটগুলিকে অনুমতি দেয়। এই প্রযুক্তি ২০১৪ সালে ব্যাপক গণমাধ্যমের নজরে আসে, যখন প্রিন্সটন বিশ্ববিদ্যালয় এবং KU Leuven বিশ্ববিদ্যালয়ের গবেষকরা তাদের গবেষণাপত্র ""The Web Never Forgets""-এ এটি বিস্তারিতভাবে ব্যাখ্যা করেন।
ক্যানভাস ফিঙ্গারপ্রিন্টিং নিয়ে গোপনীয়তার মূল উদ্বেগটি হলো, শুধু কুকি (cookies) মুছে ফেলা বা ব্রাউজারের ক্যাশ (cache) পরিষ্কার করলেই এটি এড়ানো সম্ভব নয়। ফলে, ব্যবহারকারীরা সহজেই অনলাইনে ট্র্যাকিংয়ের শিকার হতে পারেন এবং তাদের ব্রাউজিং আচরণ নিরীক্ষণ করা সম্ভব হয়।
এই উপাদানটি মজিলা ফায়ারফক্স, গুগল ক্রোম, ইন্টারনেট এক্সপ্লোরার, সাফারি, কনকরার, অপেরা এবং মাইক্রোসফ্ট এজ এর বর্তমান সংস্করণ দ্বারা সমর্থিত।