JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Примеры. Размещение карты на странице.</title>
    <canvas id="canvas" width="44" height="44"></canvas>
    <!--
        Подключаем API карт
        Параметры:
          - load=package.full - основные компоненты;
	      - lang=ru-RU - язык русский.
	    Если вы используете API локально, то в URL ресурса необходимо указывать протокол в стандартном виде (http://...)
    -->
    <script src="//api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU" type="text/javascript"></script>
</head>

<body>
    <div id="map" style="width:400px; height:300px"></div>
    <input type="button" id="destroyButton" value="Удалить карту"/>
</body>

</html>

JavaScript

ymaps.ready(function() {
        var map = new ymaps.Map("map", {
            center: [59.216479755719156, 39.887253417968715],
            zoom: 12,
            behaviors: ['default', 'scrollZoom']
        });
                
        var polygon = new ymaps.Polygon([
            [[59.2192164008285, 39.823476483932176], [59.21618014179259, 39.823776891341836], [59.21674121004697, 39.83463447343408], [59.2172197609596, 39.844901969543045], [59.22076467853722, 39.844231417289336], [59.22011842556126, 39.82901256333891], [59.2192164008285, 39.823476483932176]]
        ],
        {hintContent: "Полигон-1"},
        {fillImageHref: createCircle()});
        map.geoObjects.add(polygon);
    });

    function createCircle() {
        var canvas = document.getElementById('canvas');
        if (canvas && canvas.getContext) {
            var c = canvas.getContext('2d');
            var centerX = 22; // Координата центра круга по оси X
            var centerY = 22; // Координата центра круга по оси Y
            var radius = 20; // Радиус окружности
            var startingAngle = 0 * Math.PI; // Начальная точка окружности
            var endingAngle = 2 * Math.PI;  // Конечная точка окружности
            var counterclockwise = false;

            c.arc(centerX, centerY, radius, startingAngle,
                    endingAngle, counterclockwise);
            c.lineWidth = 2; // Толщина обводки (границы) окружности
            c.strokeStyle = '#1d74cf'; // Цвет обводки (границы) окружности
            c.fillStyle = '#ffffff'; // Цвет заливки окружности
            c.fill();
            c.stroke();
        }

        return canvas.toDataURL();
    }