कैनवास में एक छवि कैसे जोड़ें

HTML कैनवास में, आप छवियों को शामिल करके अपनी रचनाओं को बढ़ा सकते हैं। हालाँकि, ऐसा करने का प्रयास करते समय कठिनाइयों का सामना करना निराशाजनक हो सकता है। इस लेख का उद्देश्य प्रक्रिया के माध्यम से आपका मार्गदर्शन करना, एक सामान्य मुद्दे पर चर्चा करना और एक समाधान प्रदान करना है।

समस्या: मौजूदा छवि स्रोत और कोई जावास्क्रिप्ट त्रुटि नहीं होने के बावजूद, छवि प्रदर्शित होने में विफल रहती है कैनवास।

समाधान: यह सुनिश्चित करना महत्वपूर्ण है कि छवि को कैनवास पर खींचने का प्रयास करने से पहले पूरी तरह से लोड किया गया है। छवि में ऑनलोड ईवेंट श्रोता को शामिल करने के लिए अपने कोड को संशोधित करें, जैसा कि नीचे देखा गया है:

var canvas = document.getElementById('viewport'),
context = canvas.getContext('2d');

make_base();

function make_base() {
  base_image = new Image();
  base_image.src = 'img/base.png';
  
  base_image.onload = function() {
    context.drawImage(base_image, 100, 100);
  };
}

इस सरल समायोजन को शामिल करके, आपकी छवि अब लोड होने के बाद कैनवास पर सफलतापूर्वक दिखाई देगी, जिससे आप दृश्य तत्वों के साथ अपने डिजाइन को बढ़ा सकते हैं।