كيفية إضافة صورة إلى لوحة قماشية

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

المشكلة: على الرغم من وجود مصدر صورة موجود وعدم وجود أخطاء JavaScript، يفشل عرض الصورة على اللوحة القماشية.

الحل: من الضروري التأكد من تحميل الصورة بالكامل قبل محاولة رسمها على اللوحة القماشية. قم بتعديل الكود الخاص بك ليشمل مستمع حدث التحميل للصورة، كما هو موضح أدناه:

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

من خلال دمج هذا التعديل البسيط، ستظهر صورتك الآن بنجاح على اللوحة القماشية بمجرد تحميلها، مما يسمح لك بتحسين تصميماتك باستخدام العناصر المرئية.