Холст на слайдере изображений javascript

Question

Таким образом, я должен иметь возможность помещать текст элемента на белом фоне, когда элемент не имеет изображения. Хотя я немного не уверен в том, как canvas будет взаимодействовать с моим слайдером. Я использую скользкий слайдер в данный момент.

Вот мой код для загрузки моих изображений при поиске предметов.

   for (const image of imagePath) {

   const img = document.createElement("img");
   if (image.slice(0,5) == "shelf"){
   img.src = `/check/assets/img/${image}`;
   }
   else{
   img.src = '/check/assets/img/noimage.png';
   }

   img.classList.add("new");
   var div = document.createElement("div");
   div.id = `${image}`
   div.classList.add("image");

   document.getElementById('search-slider').appendChild(div);
   document.getElementById(image).appendChild(img);


   }



   // need to make the images line up
   $('.search-items').slick('unslick').slick('reinit');
   $('.search-items').not('.slick-initialized').slick({
   infinite: false, //true
   slidesToShow: 8,
   slidesToScroll: 8,
   arrows: true,
   centerMode: false,
   width: 200,
   prevArrow: $('.prev'),
   nextArrow: $('.next')
   });

Это код, который я собирался внедрить в этот код, чтобы попытаться заставить его работать. https://jsfiddle.net/tqymo4f7/4/

Я знаю, что эта строка определяет местоположение, где начинается текст. fillTextLine(context, text, 0,25);

Однако я не уверен, повлияет ли это на расположение текста по отношению к общему размеру экрана или (div) области изображения в слайдере. Я надеюсь, что то, что я говорю, имеет смысл.

Спасибо за любую помощь. Дайте мне знать, если вам нужно что-то прояснить.