Canvas element
કેનવાસ તત્વ એ એચ. ટી. એમ. એલ. 5 નો એક ભાગ છે અને 2ડી આકારો અને બિટમેપ છબીઓના ગતિશીલ, સ્ક્રિપ્ટેબલ રેન્ડરિંગ માટે પરવાનગી આપે છે. તે એક નિમ્ન સ્તરનું, પ્રક્રિયાગત મોડેલ છે જે બિટમેપને અપડેટ કરે છે. એચ. ટી. એમ. એલ. 5 કેનવાસ 2ડી રમતો બનાવવામાં પણ મદદ કરે છે. જ્યારે એચટીએમએલ5 કેનવાસ તેની પોતાની 2ડી ડ્રોઈંગ એપીઆઈ પ્રદાન કરે છે, ત્યારે તે ઓપનજીએલ ઇએસ સાથે 3ડી રેન્ડરિંગને મંજૂરી આપવા માટે વેબજીએલ એપીઆઈને પણ સમર્થન આપે છે. હિસ્ટ્રી કેનવાસને શરૂઆતમાં એપલ દ્વારા 2004 માં તેમના પોતાના મેક ઓએસ એક્સ વેબકિટ ઘટકમાં ઉપયોગ માટે રજૂ કરવામાં આવ્યું હતું, જે ડેશબોર્ડ વિજેટ્સ અને સફારી બ્રાઉઝર જેવી એપ્લિકેશનોને શક્તિ આપે છે. પાછળથી, 2005માં, તેને ગેકો બ્રાઉઝર્સના સંસ્કરણ 1.8માં અને 2006માં ઓપેરામાં અપનાવવામાં આવ્યું હતું, અને આગામી પેઢીની વેબ તકનીકો માટે નવી સૂચિત વિશિષ્ટતાઓ પર વેબ હાયપરટેક્સ્ટ એપ્લિકેશન ટેક્નોલોજી વર્કિંગ ગ્રુપ (ડબલ્યુએચએટીડબલ્યુજી) દ્વારા પ્રમાણિત કરવામાં આવ્યું હતું. ઉપયોગ કેનવાસમાં ઊંચાઈ અને પહોળાઈના લક્ષણો સાથે એચ. ટી. એમ. એલ. કોડમાં વ્યાખ્યાયિત ડ્રો કરી શકાય તેવા વિસ્તારનો સમાવેશ થાય છે. જાવાસ્ક્રિપ્ટ કોડ અન્ય સામાન્ય 2D API જેવા ચિત્ર કાર્યોના સંપૂર્ણ સમૂહ દ્વારા વિસ્તારને ઍક્સેસ કરી શકે છે, આમ ગતિશીલ રીતે જનરેટેડ ગ્રાફિક્સ માટે પરવાનગી આપે છે. કેનવાસના કેટલાક અપેક્ષિત ઉપયોગોમાં આલેખ, એનિમેશન, રમતો અને છબી રચનાનો સમાવેશ થાય છે. કેનવાસ સાથે ક્રિયાપ્રતિક્રિયામાં કેનવાસનો રેન્ડરિંગ સંદર્ભ મેળવવાનો સમાવેશ થાય છે, જે નક્કી કરે છે કે કેનવાસ API, વેબજીએલ અથવા વેબજીએલ2 રેન્ડરિંગ સંદર્ભનો ઉપયોગ કરવો કે નહીં. ઉદાહરણ નીચેનો કોડ એચ. ટી. એમ. એલ. પૃષ્ઠમાં કેનવાસ તત્વ બનાવે છેઃ <કેનવાસ આઈ. ડી. = "ઉદાહરણ" પહોળાઈ = "200" ઊંચાઈ = "200"> જો તમારું બ્રાઉઝર એચ. ટી. એમ. એલ. 5 કેનવાસને સમર્થન આપતું નથી તો આ લખાણ પ્રદર્શિત થાય છે. જાવાસ્ક્રિપ્ટનો ઉપયોગ કરીને, તમે કેનવાસ પર દોરી શકો છોઃ વાર ઉદાહરણ = document.getElementById ('ઉદાહરણ'); વાર સંદર્ભ = example.getContext ('2d'); context.fillStyle = 'લાલ'; context.fillRect (30,30,50,50); આ કોડ સ્ક્રીન પર લાલ લંબચોરસ ખેંચે છે. કેનવાસ API તમામ કેનવાસ સંદર્ભના લક્ષણોને સાચવવા અને પુનઃસ્થાપિત કરવા માટે સેવ () અને રિસ્ટોર () પણ પ્રદાન કરે છે. કેનવાસ તત્વનું કદ વિરુદ્ધ રેખાંકન સપાટીનું કદ કેનવાસમાં વાસ્તવમાં બે કદ હોય છેઃ તત્વનું કદ અને તત્વની રેખાંકન સપાટીનું કદ. તત્વની પહોળાઈ અને ઊંચાઈના લક્ષણોને સુયોજિત કરવાથી આ બંને કદ નક્કી થાય છે; સી. એસ. એસ. લક્ષણો માત્ર તત્વના કદને અસર કરે છે, ચિત્રની સપાટીને નહીં. મૂળભૂત રીતે, કેનવાસ તત્વનું કદ અને તેની રેખાંકન સપાટીનું કદ બંને 300 સ્ક્રીન પિક્સેલ્સ પહોળા અને 150 સ્ક્રીન પિક્સેલ્સ ઊંચા છે. ઉદાહરણમાં બતાવેલ સૂચિમાં, જે કેનવાસ તત્વના કદને સેટ કરવા માટે CSS નો ઉપયોગ કરે છે, તત્વનું કદ 600 પિક્સેલ્સ પહોળું અને 300 પિક્સેલ્સ ઊંચું છે, પરંતુ ચિત્રની સપાટીનું કદ 300 પિક્સેલ્સ × 150 પિક્સેલ્સના મૂળભૂત મૂલ્ય પર અપરિવર્તિત રહે છે. જ્યારે કેનવાસ તત્વનું કદ તેની રેખાંકન સપાટીના કદ સાથે મેળ ખાતું નથી, ત્યારે બ્રાઉઝર તત્વને ફિટ કરવા માટે ચિત્રની સપાટીને સ્કેલ કરે છે (જે આશ્ચર્યજનક અને અનિચ્છનીય અસરોમાં પરિણમી શકે છે). ઉદાહરણ સેટિંગ એલિમેન્ટ કદ અને રેખાંકન સપાટીનું કદ વિવિધ કિંમતોમાંઃ <! DOCTYPE એચટીએમએલ> <એચટીએમએલ> <હેડ> <શીર્ષક> કેનવાસ એલિમેન્ટ કદઃ 600 x 300, કેનવાસ રેખાંકન સપાટીનું કદઃ 300 x 150 </શીર્ષક> <શૈલી> બોડી {બેકગ્રાઉન્ડઃ #dddddd;} #canvas {માર્જિનઃ 20 પીએક્સ; પેડિંગઃ 20 પીએક્સ; બેકગ્રાઉન્ડઃ #ffffff; બોર્ડરઃ પાતળા ઇનસેટ #aaaaaa; પહોળાઈઃ 600 પીએક્સ; ઊંચાઈઃ 300 પીએક્સ;} </શૈલી> </હેડ> <બોડી> <કેનવાસ આઈડી = "કેનવાસ"> કેનવાસ સપોર્ટેડ નથી </કેનવાસ> </બોડી> </એચટીએમએલ> </એચટીએમએલ> કેનવાસ રાસ્ટર-આધારિત કેનવાસથી વિપરીત, એસ. વી. જી. વેક્ટર-આધારિત છે, જેથી દરેક દોરેલા આકારને દ્રશ્ય આલેખ અથવા દસ્તાવેજ ઑબ્જેક્ટ મોડેલમાં ઑબ્જેક્ટ તરીકે યાદ કરવામાં આવે છે, જે પછીથી બિટમેપમાં પ્રસ્તુત કરવામાં આવે છે. આનો અર્થ એ છે કે જો SVG ઓબ્જેક્ટની વિશેષતાઓ બદલવામાં આવે, તો બ્રાઉઝર આપમેળે દ્રશ્યને ફરીથી પ્રસ્તુત કરી શકે છે. બીજી બાજુ, કેનવાસ પદાર્થો તાત્કાલિક સ્થિતિમાં દોરવામાં આવે છે. ઉપરના કેનવાસના ઉદાહરણમાં, લંબચોરસ ડ્રો ઓપરેશન કેનવાસમાં ફેરફાર કરે છે, અને લંબચોરસ તરીકે તેની રજૂઆત સિસ્ટમ દ્વારા ભૂલી જાય છે. જો લંબચોરસની સ્થિતિ બદલવાની હોય, તો કેનવાસને ફરીથી દોરવાની જરૂર પડશે, જેમાં લંબચોરસ દ્વારા આવરી લેવામાં આવેલી કોઈપણ વસ્તુઓનો સમાવેશ થાય છે. સમકક્ષ એસ. વી. જી. કિસ્સામાં, કોઈ પણ વ્યક્તિ માત્ર લંબચોરસની સ્થિતિ વિશેષતાઓને બદલી શકે છે અને બ્રાઉઝર તેને ફરીથી કેવી રીતે રંગવું તે નક્કી કરશે. ત્યાં વધારાની જાવાસ્ક્રિપ્ટ લાઈબ્રેરીઓ છે જે કેનવાસ તત્વની અંદર એસવીજી જેવી દ્રશ્ય ક્ષમતાઓ રાખવા માટે કેનવાસ મોડેલને અમૂર્ત બનાવે છે. બહુવિધ કેનવાસ સ્તરોનો પણ ઉપયોગ કરી શકાય છે, જેનો અર્થ છે કે જ્યારે ફેરફારોની જરૂર હોય ત્યારે માત્ર ચોક્કસ સ્તરોને ફરીથી બનાવવાની જરૂર હોય છે. એસ. વી. જી. છબીઓ એક્સ. એમ. એલ. માં રજૂ થાય છે, અને જટિલ દ્રશ્યો એક્સ. એમ. એલ. સંપાદન સાધનો સાથે બનાવી અને જાળવી શકાય છે. એસ. વી. જી. દ્રશ્ય આલેખ ઇવેન્ટ હેન્ડલર્સને ઓબ્જેક્ટ્સ સાથે સંકળાયેલા થવા માટે સક્ષમ બનાવે છે, જેથી લંબચોરસ ઓનક્લિક ઇવેન્ટને પ્રતિસાદ આપી શકે. કેનવાસ સાથે સમાન કાર્યક્ષમતા મેળવવા માટે, તેને ક્લિક કરવામાં આવી હતી કે કેમ તે નિર્ધારિત કરવા માટે માઉસ ક્લિકના કોઓર્ડિનેટ્સને દોરેલા લંબચોરસના કોઓર્ડિનેટ્સ સાથે જાતે જ મેચ કરવું આવશ્યક છે. વૈચારિક રીતે, કેનવાસ એ નીચલા સ્તરનું API છે જેના પર ઉચ્ચ સ્તરના ઇન્ટરફેસો બનાવી શકાય છે (ઉદાહરણ તરીકે, SVG આધાર). જાવાસ્ક્રિપ્ટ લાઈબ્રેરીઓ છે જે બ્રાઉઝર્સ માટે કેનવાસનો ઉપયોગ કરીને આંશિક એસવીજી અમલીકરણ પ્રદાન કરે છે જે એસવીજી પ્રદાન કરતા નથી પરંતુ કેનવાસને ટેકો આપે છે, જેમ કે એન્ડ્રોઇડ 2. x માં બ્રાઉઝર્સ. જો કે, આ સામાન્ય રીતે કેસ નથી-તે સ્વતંત્ર ધોરણો છે. પરિસ્થિતિ જટિલ છે કારણ કે કેનવાસ માટે દ્રશ્ય આલેખ પુસ્તકાલયો છે, અને એસ. વી. જી. માં થોડી બિટમેપ હેરફેર કાર્યક્ષમતા છે. પ્રતિક્રિયાઓ તેની રજૂઆતના સમયે, કેનવાસ તત્વને વેબ ધોરણો સમુદાય તરફથી મિશ્ર પ્રતિક્રિયાઓ મળી હતી. એસવીજી ધોરણને ટેકો આપવાને બદલે નવું માલિકી તત્વ બનાવવાના એપલના નિર્ણય સામે દલીલો થઈ રહી છે. વાક્યરચના વિશે અન્ય ચિંતાઓ છે, જેમ કે નેમસ્પેસની ગેરહાજરી. 14 માર્ચ, 2007ના રોજ, વેબકિટ ડેવલપર ડેવ હયાતે એપલના સિનિયર પેટન્ટ કાઉન્સેલ, હેલેન પ્લોટકા વર્કમેન પાસેથી એક ઇમેઇલ મોકલ્યો હતો, જેમાં જણાવવામાં આવ્યું હતું કે એપલે 24 માર્ચ, 2005ના રોજ "ગ્રાફિક્સઃ ધ બિટમેપ કેનવાસ" શીર્ષક ધરાવતો વિભાગ 10.1, ડબલ્યુએચ. એ. ટી. ડબલ્યુ. જી. ના વેબ એપ્લિકેશન્સ 1 કાર્યકારી મુસદ્દાને લગતા તમામ બૌદ્ધિક સંપત્તિ અધિકારો અનામત રાખ્યા હતા, પરંતુ પેટન્ટને લાઇસન્સ આપવા માટે દરવાજો ખુલ્લો રાખ્યો હતો, જો સ્પષ્ટીકરણને ઔપચારિક પેટન્ટ નીતિ સાથે પ્રમાણભૂત સંસ્થામાં સ્થાનાંતરિત કરવામાં આવે. આનાથી વેબ ડેવલપર્સ વચ્ચે નોંધપાત્ર ચર્ચા થઈ અને વર્લ્ડ વાઇડ વેબ કન્સોર્ટિયમ (ડબલ્યુ3સી) ની રોયલ્ટી-મુક્ત લાઇસન્સની સ્પષ્ટ તરફેણની સરખામણીમાં વોટડબ્લ્યુજીની પેટન્ટ પરની નીતિના અભાવ અંગે પ્રશ્નો ઊભા થયા. એપલે પાછળથી W3Cની રોયલ્ટી-ફ્રી પેટન્ટ લાઇસન્સિંગ શરતો હેઠળ પેટન્ટ જાહેર કરી હતી. જાહેરાતનો અર્થ એ છે કે જ્યારે પણ કેનવાસ તત્વ એચટીએમએલ કાર્યકારી જૂથ દ્વારા બનાવવામાં આવેલી ભાવિ ડબલ્યુ3સી ભલામણનો ભાગ બને છે ત્યારે એપલે પેટન્ટ માટે રોયલ્ટી-મુક્ત લાઇસન્સિંગ પ્રદાન કરવું જરૂરી છે. ગોપનીયતાની ચિંતાઓ કેનવાસ ફિંગરપ્રિન્ટિંગ એ ઓનલાઇન વપરાશકર્તાઓને ટ્રેક કરવા માટેની સંખ્યાબંધ બ્રાઉઝર ફિંગરપ્રિન્ટિંગ તકનીકોમાંની એક છે જે વેબસાઇટ્સને એચટીએમએલ 5 કેનવાસ તત્વનો ઉપયોગ કરીને મુલાકાતીઓને ઓળખવા અને ટ્રૅક કરવાની મંજૂરી આપે છે. પ્રિન્સટન યુનિવર્સિટી અને કેયુ લ્યુવેન યુનિવર્સિટીના સંશોધકોએ તેમના પેપર ધ વેબ નેવર ફોરેટ્સમાં તેનું વર્ણન કર્યા પછી આ તકનીકને 2014 માં વ્યાપક મીડિયા કવરેજ મળ્યું હતું. કેનવાસ ફિંગરપ્રિન્ટિંગ સંબંધિત ગોપનીયતાની ચિંતાઓ એ હકીકતની આસપાસ કેન્દ્રિત છે કે કૂકીઝને કાઢી નાખવી અને કેશ સાફ કરવું પણ વપરાશકર્તાઓ માટે ઓનલાઇન ટ્રેકિંગ ટાળવા માટે પૂરતું નથી. બ્રાઉઝર સપોર્ટ તત્વ મોઝિલા ફાયરફોક્સ, ગૂગલ ક્રોમ, ઈન્ટરનેટ એક્સપ્લોરર, સફારી, કોન્કરર, ઓપેરા અને માઈક્રોસોફ્ટ એજના વર્તમાન સંસ્કરણો દ્વારા સપોર્ટેડ છે. એન્ટી-ગ્રેન જીઓમેટ્રી (એજીજી) કૈરો (ગ્રાફિક્સ) ડિસ્પ્લે પોસ્ટસ્ક્રિપ્ટ ગ્રાફિક્સ ડિવાઇસ ઇન્ટરફેસ (જીડીઆઈ +) ક્વાર્ટઝ 2ડી વેબજીએલ સંદર્ભો બાહ્ય કડીઓ ડબલ્યુએચએટીડબલ્યુજી વેબ એપ્લિકેશન્સ ડ્રાફ્ટ સ્પષ્ટીકરણોમાં કેનવાસનું વર્ણન એપલ ડેવલપર્સમાં કેનવાસ સંદર્ભ પૃષ્ઠ ઓપેરા ડેવલપર કોમ્યુનિટી કેનવાસ પર મૂળભૂત કેનવાસ ટ્યુટોરીયલ અને મોઝિલા ડેવલપર કેન્દ્ર એચટીએમએલ ટૅગ્સ એચટીએમએલ5 પર પ્રારંભિક પૃષ્ઠ