चित्रण से पहले छवि लोड होने की प्रतीक्षा करना

कैनवास में एक छवि जोड़ने का प्रयास करते समय, यह सुनिश्चित करना महत्वपूर्ण है कि छवि पहले लोड की गई है इसे खींचने का प्रयास किया जा रहा है। आपके कोड में जो समस्या आई है, वह छवि लोडिंग की अतुल्यकालिक प्रकृति के कारण है।

इस समस्या को हल करने के लिए, आपको छवि के ऑनलोड इवेंट में एक कॉलबैक फ़ंक्शन जोड़ना होगा। यह कॉलबैक फ़ंक्शन तब निष्पादित किया जाएगा जब छवि लोड हो जाएगी, यह सुनिश्चित करते हुए कि छवि डेटा इसे खींचने का प्रयास करने से पहले उपलब्ध है।

नीचे दिया गया सही कोड छवि को कैनवास पर खींचने से पहले लोड होने की प्रतीक्षा करेगा :

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);
  };
}