انتظار تحميل الصورة قبل الرسم

عند محاولة إضافة صورة إلى لوحة قماشية، من الضروري التأكد من تحميل الصورة قبل الرسم محاولة رسمها. ترجع المشكلة التي واجهتها في التعليمات البرمجية الخاصة بك إلى الطبيعة غير المتزامنة لتحميل الصورة.

لحل هذه المشكلة، تحتاج إلى إضافة وظيفة رد اتصال إلى حدث التحميل للصورة. سيتم تنفيذ وظيفة رد الاتصال هذه عند انتهاء تحميل الصورة، مما يضمن توفر بيانات الصورة قبل محاولة رسمها.

سينتظر الكود المصحح أدناه تحميل الصورة قبل رسمها إلى اللوحة القماشية. :

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