HTML5 <canvas> टैग का उपयोग स्क्रिप्टिंग के माध्यम से ग्राफिक्स, एनिमेशन आदि बनाने के लिए किया जाता है। HTML5 कैनवास के साथ इमेज का उपयोग करने के लिए drawImage() मेथड का उपयोग करें। यह मेथड दी गई इमेज को कैनवास पर बनाता है।
उदाहरण
HTML कैनवास के साथ इमेज का उपयोग करने का तरीका सीखने के लिए निम्न कोड चलाएं। यहां, इमेज एक इमेज या कैनवास ऑब्जेक्ट का संदर्भ है। x और y टार्गेट कैनवास पर कोऑर्डिनेट बनाते हैं जहां हमारी इमेज रखी जानी चाहिए।
<!DOCTYPE HTML> <html> <head> <script type="text/javascript"> function drawShape() { var canvas = document.getElementById('mycanvas'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); var img = new Image(); img.src = '/images/backdrop.jpg'; img.onload = function() { ctx.drawImage(img,0,0); ctx.beginPath(); ctx.moveTo(30,96); ctx.lineTo(70,66); ctx.lineTo(103,76); ctx.lineTo(170,15); ctx.stroke(); } } else { alert('यह डेमो देखने के लिए Safari या Firefox 1.5+ की आवश्यकता है।'); } } </script> </head> <body onload="drawShape();"> <canvas id="mycanvas"></canvas> </body> </html>महत्वपूर्ण: इमेज लोड होने के बाद ही drawImage() कॉल करें, इसलिए onload इवेंट हैंडलर का उपयोग करें।
