Canvas element
ক্যানভাস উপাদানটি এইচটিএমএল5-এর অংশ এবং 2ডি আকার এবং বিটম্যাপ চিত্রগুলির গতিশীল, স্ক্রিপ্টযোগ্য রেন্ডারিংয়ের অনুমতি দেয়। এটি একটি নিম্ন স্তরের, পদ্ধতিগত মডেল যা একটি বিটম্যাপ আপডেট করে। এইচ. টি. এম. এল5 ক্যানভাস 2ডি গেম তৈরিতেও সহায়তা করে। যদিও এইচটিএমএল5 ক্যানভাস নিজস্ব 2ডি অঙ্কন এপিআই প্রদান করে, এটি ওপেনজিএল ইএস-এর সাথে 3ডি রেন্ডারিংয়ের অনুমতি দেওয়ার জন্য ওয়েবজিএল এপিআইকেও সমর্থন করে। ড্যাশবোর্ড উইজেট এবং সাফারি ব্রাউজারের মতো অ্যাপ্লিকেশনগুলিকে শক্তিশালী করার জন্য অ্যাপল প্রাথমিকভাবে 2004 সালে তাদের নিজস্ব ম্যাক ওএস এক্স ওয়েবকিট অংশে ব্যবহারের জন্য হিস্ট্রি ক্যানভাস চালু করেছিল। পরে, 2005 সালে, এটি 2006 সালে গেকো ব্রাউজার এবং অপেরার সংস্করণ 1.8-এ গৃহীত হয় এবং পরবর্তী প্রজন্মের ওয়েব প্রযুক্তির জন্য নতুন প্রস্তাবিত নির্দিষ্টকরণের উপর ওয়েব হাইপারটেক্সট অ্যাপ্লিকেশন টেকনোলজি ওয়ার্কিং গ্রুপ (হোয়াটডব্লিউজি) দ্বারা প্রমিত করা হয়। ব্যবহার একটি ক্যানভাস উচ্চতা এবং প্রস্থ বৈশিষ্ট্য সহ এইচটিএমএল কোডে সংজ্ঞায়িত একটি অঙ্কনযোগ্য অঞ্চল নিয়ে গঠিত। জাভাস্ক্রিপ্ট কোড অন্যান্য সাধারণ 2ডি এপিআই-এর মতো অঙ্কন ফাংশনগুলির একটি সম্পূর্ণ সেটের মাধ্যমে এলাকাটি অ্যাক্সেস করতে পারে, এইভাবে গতিশীলভাবে উত্পন্ন গ্রাফিক্সের জন্য অনুমতি দেয়। ক্যানভাসের কিছু প্রত্যাশিত ব্যবহারের মধ্যে রয়েছে বিল্ডিং গ্রাফ, অ্যানিমেশন, গেম এবং চিত্র রচনা। ক্যানভাসের সাথে মিথস্ক্রিয়ায় ক্যানভাসের রেন্ডারিং প্রসঙ্গ পাওয়া জড়িত, যা ক্যানভাস এপিআই, ওয়েবজিএল, বা ওয়েবজিএল2 রেন্ডারিং প্রসঙ্গ ব্যবহার করতে হবে কিনা তা নির্ধারণ করে। উদাহরণ নিম্নলিখিত কোডটি একটি এইচটিএমএল পৃষ্ঠায় একটি ক্যানভাস উপাদান তৈরি করেঃ <ক্যানভাস আইডি = "উদাহরণ" প্রস্থ = "200" উচ্চতা = "200"> আপনার ব্রাউজার এইচটিএমএল5 ক্যানভাস সমর্থন না করলে এই লেখাটি প্রদর্শিত হয়। </canvas> জাভাস্ক্রিপ্ট ব্যবহার করে, আপনি ক্যানভাসে আঁকতে পারেনঃ ভার উদাহরণ = document.getElementById ('উদাহরণ'); ভার প্রসঙ্গ = example.getContext ('2d'); context.fillStyle = 'লাল'; context.fillRect (30,30,50,50); এই কোডটি পর্দায় একটি লাল আয়তক্ষেত্র আঁকে। ক্যানভাস এপিআই সমস্ত ক্যানভাস প্রসঙ্গের বৈশিষ্ট্য সংরক্ষণ এবং পুনরুদ্ধারের জন্য সংরক্ষণ () এবং পুনরুদ্ধার () প্রদান করে। ক্যানভাস উপাদানের আকার বনাম অঙ্কন পৃষ্ঠের আকার একটি ক্যানভাসের আসলে দুটি আকার থাকেঃ উপাদানটির আকার এবং উপাদানটির অঙ্কন পৃষ্ঠের আকার। উপাদানটির প্রস্থ এবং উচ্চতা বৈশিষ্ট্য নির্ধারণ এই উভয় মাপ নির্ধারণ করে; সিএসএস বৈশিষ্ট্যগুলি শুধুমাত্র উপাদানটির আকারকে প্রভাবিত করে, অঙ্কন পৃষ্ঠকে নয়। ডিফল্টরূপে, ক্যানভাস উপাদানটির আকার এবং এর অঙ্কন পৃষ্ঠের আকার উভয়ই 300 স্ক্রিন পিক্সেল প্রশস্ত এবং 150 স্ক্রিন পিক্সেল উচ্চ। উদাহরণে দেখানো তালিকায়, যা ক্যানভাস উপাদানটির আকার নির্ধারণ করতে সিএসএস ব্যবহার করে, উপাদানটির আকার 600 পিক্সেল প্রশস্ত এবং 300 পিক্সেল উঁচু, তবে অঙ্কন পৃষ্ঠের আকার 300 পিক্সেল × 150 পিক্সেলের ডিফল্ট মান অপরিবর্তিত থাকে। যখন কোনও ক্যানভাস উপাদানের আকার তার অঙ্কন পৃষ্ঠের আকারের সাথে মেলে না, তখন ব্রাউজারটি উপাদানটির সাথে খাপ খাইয়ে নেওয়ার জন্য অঙ্কন পৃষ্ঠকে স্কেল করে (যার ফলে বিস্ময়কর এবং অযাচিত প্রভাব পড়তে পারে)। উদাহরণ হিসেবে উপাদানের আকার নির্ধারণ এবং বিভিন্ন মান অনুযায়ী পৃষ্ঠের আকার অঙ্কনঃ <! ডিওসিটিওয়াইপিই এইচটিএমএল> <এইচটিএমএল> <হেড> <শিরোনাম> ক্যানভাস উপাদানের আকারঃ 600 x 300, ক্যানভাস অঙ্কন পৃষ্ঠের আকারঃ 300 x 150 </শিরোনাম> <শৈলী> বডি {ব্যাকগ্রাউন্ডঃ #dddddd #canvas {মার্জিনঃ 20পিএক্স; প্যাডিংঃ 20পিএক্স; ব্যাকগ্রাউন্ডঃ #ffffff; বর্ডারঃ থিন ইনসেট #aaaaaa; প্রস্থঃ 600পিএক্স; উচ্চতাঃ 300পিএক্স;} </শৈলী> </হেড> <বডি> <ক্যানভাস আইডি = "ক্যানভাস"> ক্যানভাস সমর্থিত নয় </ক্যানভাস> </বডি> </এইচটিএমএল> ক্যানভাসের বিপরীতে, যা রাস্টার-ভিত্তিক, এসভিজি ভেক্টর-ভিত্তিক, যাতে প্রতিটি আঁকা আকৃতি একটি দৃশ্য গ্রাফ বা ডকুমেন্ট অবজেক্ট মডেলে একটি বস্তু হিসাবে মনে রাখা হয়, যা পরবর্তীকালে একটি বিটম্যাপে রেন্ডার করা হয়। এর মানে হল যে যদি কোনও এসভিজি অবজেক্টের বৈশিষ্ট্যগুলি পরিবর্তন করা হয়, তবে ব্রাউজার স্বয়ংক্রিয়ভাবে দৃশ্যটি পুনরায় রেন্ডার করতে পারে। অন্যদিকে, ক্যানভাস বস্তুগুলি তাৎক্ষণিক মোডে আঁকা হয়। উপরের ক্যানভাসের উদাহরণে, আয়তক্ষেত্র ড্র অপারেশন ক্যানভাসকে পরিবর্তন করে এবং আয়তক্ষেত্র হিসাবে এর উপস্থাপনা সিস্টেম দ্বারা ভুলে যায়। আয়তক্ষেত্রের অবস্থান পরিবর্তন করতে হলে আয়তক্ষেত্র দ্বারা আবৃত যে কোনও বস্তু সহ ক্যানভাসটি পুনরায় আঁকতে হবে। সমতুল্য এস. ভি. জি-র ক্ষেত্রে, আয়তক্ষেত্রের অবস্থানের বৈশিষ্ট্যগুলি সহজেই পরিবর্তন করা যেতে পারে এবং ব্রাউজার নির্ধারণ করবে কিভাবে এটি পুনরায় রঙ করা যায়। অতিরিক্ত জাভাস্ক্রিপ্ট লাইব্রেরি রয়েছে যা ক্যানভাস উপাদানের মধ্যে এসভিজি-এর মতো দৃশ্য ক্ষমতা রাখার জন্য ক্যানভাস মডেলটিকে বিমূর্ত করে। একাধিক ক্যানভাস স্তরও ব্যবহার করা যেতে পারে, যার অর্থ পরিবর্তনের প্রয়োজন হলে শুধুমাত্র নির্দিষ্ট স্তরগুলি পুনরায় তৈরি করা প্রয়োজন। এসভিজি চিত্রগুলি এক্সএমএল-এ উপস্থাপিত হয় এবং এক্সএমএল সম্পাদনা সরঞ্জামগুলির সাহায্যে জটিল দৃশ্যগুলি তৈরি ও রক্ষণাবেক্ষণ করা যেতে পারে। এসভিজি দৃশ্য গ্রাফ ইভেন্ট হ্যান্ডলারদের বস্তুর সাথে যুক্ত হতে সক্ষম করে, তাই একটি আয়তক্ষেত্র একটি অনক্লিক ইভেন্টে সাড়া দিতে পারে। ক্যানভাসের সাথে একই কার্যকারিতা পেতে, ক্লিক করা হয়েছে কিনা তা নির্ধারণ করার জন্য মাউস ক্লিকের স্থানাঙ্কগুলি আঁকা আয়তক্ষেত্রের স্থানাঙ্কের সাথে ম্যানুয়ালি মেলাতে হবে। ধারণাগতভাবে, ক্যানভাস একটি নিম্ন-স্তরের এপিআই যার উপর উচ্চ-স্তরের ইন্টারফেস তৈরি করা যেতে পারে (উদাহরণস্বরূপ, এসভিজি সমর্থন)। জাভাস্ক্রিপ্ট লাইব্রেরি রয়েছে যা ব্রাউজারগুলির জন্য ক্যানভাস ব্যবহার করে আংশিক এসভিজি বাস্তবায়ন প্রদান করে যা এসভিজি প্রদান করে না কিন্তু ক্যানভাস সমর্থন করে, যেমন অ্যান্ড্রয়েড 2. x-এর ব্রাউজার। তবে, এটি সাধারণত হয় না-এগুলি স্বাধীন মান। পরিস্থিতি জটিল কারণ ক্যানভাসের জন্য দৃশ্য গ্রাফ লাইব্রেরি রয়েছে এবং এসভিজির কিছু বিটম্যাপ ম্যানিপুলেশন কার্যকারিতা রয়েছে। প্রতিক্রিয়া এর প্রবর্তনের সময়, ক্যানভাস উপাদানটি ওয়েব স্ট্যান্ডার্ড সম্প্রদায়ের কাছ থেকে মিশ্র প্রতিক্রিয়া পেয়েছিল। এসভিজি মানকে সমর্থন করার পরিবর্তে একটি নতুন মালিকানাধীন উপাদান তৈরি করার অ্যাপলের সিদ্ধান্তের বিরুদ্ধে যুক্তি রয়েছে। বাক্য গঠন সম্পর্কে অন্যান্য উদ্বেগ রয়েছে, যেমন একটি নামস্থানের অনুপস্থিতি। 14ই মার্চ, 2007-এ, ওয়েবকিট ডেভেলপার ডেভ হায়াত অ্যাপলের সিনিয়র পেটেন্ট কাউন্সেল, হেলেন প্লটকা ওয়ার্কম্যানের কাছ থেকে একটি ইমেল পাঠিয়েছিলেন, যেখানে বলা হয়েছিল যে অ্যাপল 24শে মার্চ, 2005-এর ডব্লিউএইচএটিডব্লিউজি-র ওয়েব অ্যাপ্লিকেশন 1-এর ওয়ার্কিং ড্রাফ্ট, ধারা 10.1-এর সাথে সম্পর্কিত সমস্ত বৌদ্ধিক সম্পত্তির অধিকার সংরক্ষণ করে, যার শিরোনাম ছিল "গ্রাফিক্সঃ দ্য বিটম্যাপ ক্যানভাস", কিন্তু যদি নির্দিষ্টকরণটি একটি আনুষ্ঠানিক পেটেন্ট নীতি সহ একটি স্ট্যান্ডার্ড সংস্থায় স্থানান্তরিত করা হয় তবে পেটেন্টের লাইসেন্স দেওয়ার জন্য দরজা খোলা রেখেছিল। এটি ওয়েব ডেভেলপারদের মধ্যে যথেষ্ট আলোচনার সৃষ্টি করে এবং ওয়ার্ল্ড ওয়াইড ওয়েব কনসোর্টিয়াম (ডব্লিউ3সি)-এর রয়্যালটি-মুক্ত লাইসেন্সের স্পষ্ট সমর্থনের তুলনায় হোয়াটডব্লিউজি-র পেটেন্ট সম্পর্কিত নীতির অভাব সম্পর্কে প্রশ্ন উত্থাপন করে। অ্যাপল পরে ডব্লিউ3সি-র রয়্যালটি-মুক্ত পেটেন্ট লাইসেন্সিং শর্তাবলীর অধীনে পেটেন্টগুলি প্রকাশ করে। এই প্রকাশের অর্থ হল, যখনই ক্যানভাস উপাদানটি এইচ. টি. এম. এল ওয়ার্কিং গ্রুপ দ্বারা তৈরি ভবিষ্যতের ডব্লিউ3সি সুপারিশের অংশ হয়ে ওঠে, তখন অ্যাপলকে পেটেন্টের জন্য রয়্যালটি-মুক্ত লাইসেন্স প্রদান করতে হয়। ক্যানভাস ফিঙ্গারপ্রিন্টিং হল অনলাইন ব্যবহারকারীদের ট্র্যাক করার জন্য ব্রাউজার ফিঙ্গারপ্রিন্টিং কৌশলগুলির মধ্যে একটি যা ওয়েবসাইটগুলিকে এইচটিএমএল5 ক্যানভাস উপাদান ব্যবহার করে দর্শকদের সনাক্ত এবং ট্র্যাক করার অনুমতি দেয়। 2014 সালে প্রিন্সটন বিশ্ববিদ্যালয় এবং কেইউ লিউভেন বিশ্ববিদ্যালয়ের গবেষকরা তাদের গবেষণাপত্রে দ্য ওয়েব নেভার ফরগেটস-এ এটি বর্ণনা করার পরে এই কৌশলটি ব্যাপক মিডিয়া কভারেজ পেয়েছিল। ক্যানভাস ফিঙ্গারপ্রিন্টিং সম্পর্কিত গোপনীয়তার উদ্বেগ এই সত্যকে কেন্দ্র করে যে এমনকি কুকিজ মুছে ফেলা এবং ক্যাশে সাফ করা ব্যবহারকারীদের অনলাইন ট্র্যাকিং এড়ানোর জন্য যথেষ্ট হবে না। ব্রাউজার সমর্থন উপাদানটি মোজিলা ফায়ারফক্স, গুগল ক্রোম, ইন্টারনেট এক্সপ্লোরার, সাফারি, কনকোয়ারার, অপেরা এবং মাইক্রোসফ্ট এজ এর বর্তমান সংস্করণ দ্বারা সমর্থিত। আরও দেখুন অ্যান্টি-গ্রেইন জ্যামিতি (এজিজি) কায়রো (গ্রাফিক্স) ডিসপ্লে পোস্টস্ক্রিপ্ট গ্রাফিক্স ডিভাইস ইন্টারফেস (জিডিআই +) কোয়ার্টজ 2ডি ওয়েবজিএল রেফারেন্স বাহ্যিক লিঙ্ক ডাব্লুএইচএটিডব্লিউজি ওয়েব অ্যাপ্লিকেশন খসড়া নির্দিষ্টকরণে ক্যানভাস বিবরণ অ্যাপল ডেভেলপারদের কানেকশন বেসিক ক্যানভাস টিউটোরিয়ালে অ্যাপল ডেভেলপার কমিউনিটি ক্যানভাস টিউটোরিয়াল এবং মোজিলা ডেভেলপার সেন্টার এইচটিএমএল ট্যাগ এইচটিএমএল5-এর প্রারম্ভিক পৃষ্ঠা