JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://api-maps.yandex.ru/2.1/?lang=ru-RU"></script>
<div id="map"/>

<canvas id="e" width="200" height="200" style="display:none"></canvas>

CSS

#map {
    width: 640px;
    height: 480px;
}
.map-icon__content {
    font: bold 18px arial;
}

JavaScript

ymaps.ready().done(function (ym) {
    var myMap = new ym.Map('map', {
        center: [55.75, 37.50 ],
        zoom: 9
    });
    
     var canvas = document.getElementById("e");
  var context = canvas.getContext("2d");
  context.fillStyle = "black";
  context.font = "bold 46px Arial";
  context.fillText("45", 80, 150);
     context.fillRect (10,10,280,280);
      context.fillStyle = "white";
     context.fillText("45", 80, 150);     
    context.width = 903;
context.height = 657;

    
var scrImg = canvas.toDataURL();
    
   var myPolygon = new ymaps.Polygon([
        // Указываем координаты вершин многоугольника.
        // Координаты вершин внешнего контура.
        [
            [55.75, 37.50],
            [55.80, 37.60],
            [55.75, 37.70],
            [55.70, 37.70],
            [55.70, 37.50]
        ] 
    ], {
        // Описываем свойства геообъекта.
        // Содержимое балуна.
        hintContent: "Многоугольник"
    }, {
        // Задаем опции геообъекта.
        // Цвет заливки.
        fillColor: '#00FF0088',
        fillImageHref: scrImg,
        // Ширина обводки.
        strokeWidth: 5
    });

    // Добавляем многоугольник на карту.
    myMap.geoObjects.add(myPolygon);
});