Canvas element
कैनवास तत्व एच. टी. एम. एल. 5 का हिस्सा है और 2 डी आकारों और बिटमैप छवियों के गतिशील, स्क्रिप्ट करने योग्य प्रतिपादन की अनुमति देता है। यह एक निम्न स्तर का, प्रक्रियात्मक मॉडल है जो एक बिटमैप को अद्यतन करता है। एच. टी. एम. एल. 5 कैनवास 2डी गेम बनाने में भी मदद करता है। जबकि एचटीएमएल5 कैनवास अपना स्वयं का 2डी ड्राइंग एपीआई प्रदान करता है, यह ओपनजीएल ईएस के साथ 3डी प्रतिपादन की अनुमति देने के लिए वेबजीएल एपीआई का भी समर्थन करता है। हिस्ट्री कैनवास को शुरू में ऐप्पल द्वारा 2004 में अपने स्वयं के मैक ओएस एक्स वेबकिट घटक में उपयोग के लिए पेश किया गया था, जो डैशबोर्ड विजेट और सफारी ब्राउज़र जैसे अनुप्रयोगों को शक्ति प्रदान करता है। बाद में, 2005 में, इसे 2006 में गेको ब्राउज़र और ओपेरा के संस्करण 1.8 में अपनाया गया, और अगली पीढ़ी की वेब प्रौद्योगिकियों के लिए नए प्रस्तावित विनिर्देशों पर वेब हाइपरटेक्स्ट एप्लिकेशन टेक्नोलॉजी वर्किंग ग्रुप (डब्ल्यूएचएटीडब्ल्यूजी) द्वारा मानकीकृत किया गया। उपयोग एक कैनवास में ऊंचाई और चौड़ाई विशेषताओं के साथ एच. टी. एम. एल. कोड में परिभाषित एक खींचने योग्य क्षेत्र होता है। जावास्क्रिप्ट कोड अन्य सामान्य 2डी एपीआई के समान ड्राइंग कार्यों के एक पूर्ण सेट के माध्यम से क्षेत्र तक पहुंच सकता है, इस प्रकार गतिशील रूप से उत्पन्न ग्राफिक्स की अनुमति देता है। कैनवास के कुछ प्रत्याशित उपयोगों में निर्माण ग्राफ, एनिमेशन, खेल और छवि रचना शामिल हैं। कैनवास के साथ बातचीत में कैनवास के प्रतिपादन संदर्भ को प्राप्त करना शामिल है, जो यह निर्धारित करता है कि कैनवास एपीआई, वेबजीएल, या वेबजीएल2 प्रतिपादन संदर्भ का उपयोग करना है या नहीं। उदाहरण निम्नलिखित कोड एक एच. टी. एम. एल. पृष्ठ में एक कैनवास तत्व बनाता हैः <कैनवास आई. डी. = "उदाहरण" चौड़ाई = "200" ऊंचाई = "200"> यह पाठ प्रदर्शित होता है यदि आपका ब्राउज़र एच. टी. एम. एल. 5 कैनवास का समर्थन नहीं करता है। जावास्क्रिप्ट का उपयोग करके, आप कैनवास पर चित्र बना सकते हैंः वार उदाहरण = document.getElementById ('उदाहरण'); वार संदर्भ = example.getContext ('2d'); context.fillStyle = 'लाल'; context.fillRect (30,30,50,50); यह कोड स्क्रीन पर एक लाल आयत खींचता है। कैनवास एपीआई सभी कैनवास संदर्भ विशेषताओं को सहेजने और पुनर्स्थापित करने के लिए सेव () और रिस्टोर () भी प्रदान करता है। कैनवास तत्व का आकार बनाम ड्राइंग सतह का आकार एक कैनवास में वास्तव में दो आकार होते हैंः तत्व का आकार और तत्व की ड्राइंग सतह का आकार। तत्व की चौड़ाई और ऊंचाई विशेषताओं को निर्धारित करना इन दोनों आकारों को निर्धारित करता है; सीएसएस विशेषताएँ केवल तत्व के आकार को प्रभावित करती हैं न कि ड्राइंग सतह को। डिफ़ॉल्ट रूप से, कैनवास तत्व का आकार और इसकी ड्राइंग सतह का आकार दोनों 300 स्क्रीन पिक्सेल चौड़ा और 150 स्क्रीन पिक्सेल ऊंचा है। उदाहरण में दिखाई गई सूची में, जो कैनवास तत्व के आकार को निर्धारित करने के लिए सीएसएस का उपयोग करता है, तत्व का आकार 600 पिक्सेल चौड़ा और 300 पिक्सेल ऊंचा है, लेकिन ड्राइंग सतह का आकार 300 पिक्सेल × 150 पिक्सेल के डिफ़ॉल्ट मूल्य पर अपरिवर्तित रहता है। जब एक कैनवास तत्व का आकार उसकी ड्राइंग सतह के आकार से मेल नहीं खाता है, तो ब्राउज़र तत्व को फिट करने के लिए ड्राइंग सतह को मापता है (जिसके परिणामस्वरूप आश्चर्यजनक और अवांछित प्रभाव हो सकते हैं)। तत्व के आकार की सेटिंग और सतह के आकार को विभिन्न मूल्यों पर खींचने का उदाहरण हैः <! DOCTYPE एच. टी. एम. एल.> <एच. टी. एम. एल.> <हेड> <शीर्षक> कैनवास तत्व का आकारः 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 पर परिचयात्मक पृष्ठ