Can you help me complete the drawing script on the Yandex map?

Question

MODX

The script is almost ready. The problem is that on the canvas the line is drawn not where the cursor passes. It is necessary to make that it was drawn under the cursor. Polygons are added where the cursor went normally. Site on modex. The address is http://okna.funnyschool.kz/search?search=aspirin%2... The code is as follows:

Answer 1

<canvas id="canv"></canvas>
<div id="map"></div>
<script src="http://mourner.github.io/simplify-js/simplify.js"></script>
<script type="text/javascript" src="https://api-maps.yandex.ru/2.1/?lang=ru_RU"></script>

html,
body,
#map {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

canvas {
  border: 1px solid #aaa;
  position: absolute;
  z-index: 99999;
  top: 0;
  left: 0;
}

<script>
  var Map = (function() {

  ymaps.ready(init);
  var myMap;

  function init() {
    myMap = new ymaps.Map("map", {
      center: [43.2566700, 76.9286100], // Алматы
      zoom: 11
    }, {
      balloonMaxWidth: 200,
      searchControlProvider: 'yandex#search'
    });

    addPolygon()
  }


  function convert(coords) {
    var projection = myMap.options.get('projection');

    return coords.map(function(el) {
      var c = projection.fromGlobalPixels(myMap.converter.pageToGlobal([el.x, el.y]), myMap.getZoom());
      return c;
    });
  }

  function addPolygon(coord) {
    var myGeoObject = new ymaps.GeoObject({
      geometry: {
        type: "Polygon",
        coordinates: [coord],
      },
    }, {
      fillColor: '#00FF00',
      strokeColor: '#0000FF',
      opacity: 0.5,
      strokeWidth: 3
    });
var geoObject1 = [!readsearchres? &reads=`[!search_words!]`!];
  //var teststring = '!readsearchres? reads=`!search_words!`!';
  //var teststring = '!getDillersCoords3!';
            
            objects = ymaps.geoQuery(geoObject1).addToMap(myMap);
            objects.setOptions('preset', 'islands#blueStretchyIcon');
          //
          objects.add(myGeoObject);
           myMap.geoObjects.add(myGeoObject);
    myGeoObject.editor.startEditing();//включить редактирование полигона
    var objectsInsidePoly = objects.searchInside(myGeoObject);
            objectsInsidePoly.setOptions('preset', 'islands#redStretchyIcon');
        // Оставшиеся объекты - синими.
             objects.remove(objectsInsidePoly).setOptions('preset', 'islands#blueStretchyIcon');
  //alert('Добавление вершины полигона');
  objects.searchInside(myGeoObject).addToMap(myMap);
        // Оставшиеся объекты будем удалять с карты.
        objects.remove(objectsInsidePoly).removeFromMap(myMap);
             //////////////////////////////////////////////////ловим изменение полигона
             myGeoObject.events.add('geometrychange', function () { window.setTimeout(function () {
//если вершин больше 3 то ищем объекты в полигоне
            //if (myPolygon.geometry._coordPath._coordinates[0].length > 3) {
  //myPolygon.editor.stopDrawing();
            var objectsInsidePoly = objects.searchInside(myGeoObject);
            objectsInsidePoly.setOptions('preset', 'islands#redStretchyIcon');
        // Оставшиеся объекты - синими.
             objects.remove(objectsInsidePoly).setOptions('preset', 'islands#blueStretchyIcon');
  //alert('Добавление вершины полигона');
  objects.searchInside(myGeoObject).addToMap(myMap);
        // Оставшиеся объекты будем удалять с карты.
        objects.remove(objectsInsidePoly).removeFromMap(myMap);
  //}
},100);
            });
  }

  return {
    addPolygon: addPolygon,
    convert: convert
  };
})();

//----------------------

var canv = document.getElementById('canv'),
  ctx = canv.getContext('2d'),

  line = [];

var map = document.getElementById('map');
canv.width = map.offsetWidth;
canv.height = map.offsetWidth;


var startX = 0,
  startY = 0;

function mouseDown(e) {
  ctx.clearRect(0, 0, canv.width, canv.height);

  startX = e.pageX - e.target.offsetLeft;
  startY = e.pageY - e.target.offsetTop;

  canv.addEventListener('mouseup', mouseUp);
  canv.addEventListener('mousemove', mouseMove);


  line = [];
  line.push({
    x: startX,
    y: startY
  });
}


function mouseMove(e) {
  var x = e.pageX - e.target.offsetLeft,
    y = e.pageY - e.target.offsetTop;

  ctx.beginPath();
  ctx.moveTo(startX, startY);
  ctx.lineTo(x, y);
  ctx.stroke();

  startX = x;
  startY = y;
  line.push({
    x: x,
    y: y
  });
}

function mouseUp() {
  canv.removeEventListener('mouseup', mouseUp);
  canv.removeEventListener('mousemove', mouseMove);

  aproximate();
  document.getElementById('canv').style.display = 'none';//убрать канву
}

function aproximate() {
  ctx.clearRect(0, 0, canv.width, canv.height);
  var res = simplify(line, 5);
  res = Map.convert(res);
  Map.addPolygon(res);
}


canv.addEventListener('mousedown', mouseDown);
</script>