Draw canvas modal

Hi.
I have an application where there is a button that displays a modal to be able to draw on it, but at the time of creating the drawing, it does not detect the touch string being in a different string, for example: if I start the drawing from the center of the modal , this begins to be created from the bottom of the modal.

/*
     |------------------------------
     | MODAL DIBUJAR FIRMA
     |------------------------------
     |
     |
     |
     |
     |
     |
     |
     */
     function modalFirmaSupervisor(){
        
        var modal = app.modal({

              title:'<canvas class="canvas" id="canvas"></canvas>',
              buttons: [
              {              
                    text: '<span class="color-red">CANCELAR</span>'             
              },
              {
                    text: ' Limpiar', 
                    onClick: function(){     
                       //Funcion para limpiar el canvas
                       limpiarFirmaSupervisor();                            
                    },
                    close: false,         
              },
              {
                    text: 'GUARDAR',
                    bold: true, 
                    onClick: function() {
                       //Funcion para guardar la firma
                       guardarFirmaSupervisor();
                    }
                 },
              ] 

        });

        //Example : https://codepen.io/honmanyau/pen/OoOMQR

        /*
        |--------------------------
        |  Globals
        |--------------------------
        |
        |
        |
        |
        |
        |
        |
        |
        */
        const canvas = document.getElementById('canvas');
        const canvasContext = canvas.getContext('2d');
        //const clearButton = document.getElementById('clear-button');
        const state = {
          mousedown: false
        };            

        /*
        |--------------------------
        |  Configuration
        |--------------------------
        |
        |
        |
        |
        |
        |
        |
        |
        */
        const lineWidth = 0.1;
        const halfLineWidth = lineWidth / 2;
        const fillStyle = '#003bb0';
        const strokeStyle = '#003bb0';
        const shadowColor = '#003bb0';
        const shadowBlur = lineWidth / 4;

        /*
        |--------------------------
        | Events Listeners
        |--------------------------
        |
        |
        |
        |
        |
        |
        |
        */
        canvas.addEventListener('mousedown', handleWritingStart);
        canvas.addEventListener('mousemove', handleWritingInProgress);
        canvas.addEventListener('mouseup', handleDrawingEnd);
        canvas.addEventListener('mouseout', handleDrawingEnd);

        canvas.addEventListener('touchstart', handleWritingStart);
        canvas.addEventListener('touchmove', handleWritingInProgress);
        canvas.addEventListener('touchend', handleDrawingEnd);

        //clearButton.addEventListener('click', handleClearButtonClick);
        

        /*
        |--------------------------
        |  Event Handlers
        |--------------------------
        |
        |
        |
        |
        |
        |
        |
        |
        */
        function handleWritingStart(event) {

           event.preventDefault();

           const mousePos = getMosuePositionOnCanvas(event);
          
           canvasContext.beginPath();

           canvasContext.moveTo(mousePos.x, mousePos.y);

           canvasContext.lineWidth = lineWidth;
           canvasContext.strokeStyle = strokeStyle;
           canvasContext.shadowColor = null;
           canvasContext.shadowBlur = null;

           canvasContext.fill();
          
           state.mousedown = true;
        }

        
        /*
        |--------------------------
        |  Touch Move
        |--------------------------
        |
        |
        |
        |
        |
        |
        |
        |
        */
        function handleWritingInProgress(event) {

           event.preventDefault();
          
           if (state.mousedown) {

              const mousePos = getMosuePositionOnCanvas(event);
              canvasContext.lineTo(mousePos.x, mousePos.y);
              canvasContext.stroke();

           }

        }
        
        /*
        |--------------------------
        |  Touch End
        |--------------------------
        | Al terminar de dibujar
        | crea automaticamente 
        | la imagen de la firma
        |
        |
        |
        |
        |
        */
        function handleDrawingEnd(event) {

           event.preventDefault();
          
           if (state.mousedown) {

              canvasContext.shadowColor = shadowColor;
              canvasContext.shadowBlur = shadowBlur;
              canvasContext.stroke();

           }
          
           state.mousedown = false;
           canvasURL();
        }
        
        /*
        |--------------------------
        |  Canvas URL
        |--------------------------
        |
        |
        |
        |
        |
        |
        |
        |
        */
        function canvasURL() {

           var canvasURL = canvas.toDataURL('image/jpeg', 1.0); //Formato png
           $$('#string-firma').prop('innerHTML', '');
           $$('#string-firma').prop('innerHTML', canvasURL);

           $$('#imagen-firma').prop('src', '');
           $$('#imagen-firma').prop('src', canvasURL);

        }

        /*
        |--------------------------
        |  Handle Clear Button
        |--------------------------
        |
        |
        |
        |
        |
        |
        |
        |
        */
        function limpiarFirmaSupervisor(event) {

           canvasContext.clearRect(0, 0, canvas.width, canvas.height);

           $$('#string-firma').prop('innerHTML', '');
           $$('#imagen-firma').prop('src', '');

        }

        /*
        |--------------------------
        |  Helper Functions
        |--------------------------
        |
        |
        |
        |
        |
        |
        |
        |
        */
        function getMosuePositionOnCanvas(event) {

           const clientX = event.clientX || event.touches[0].clientX;
           const clientY = event.clientY || event.touches[0].clientY;
           const { offsetLeft, offsetTop } = event.target;
           const canvasX = clientX - offsetLeft;
           const canvasY = clientY - offsetTop;

           // change non-opaque pixels to white
           var imgData = canvasContext.getImageData(0,0,canvas.width,canvas.height);
           var data    = imgData.data;
          
           for(var i=0;i<data.length;i+=4){

              if(data[i+3]<255){

                 data[i]=255;
                 data[i+1]=255;
                 data[i+2]=255;
                 data[i+3]=255;

              }
           }

           canvasContext.putImageData(imgData,0,0);

           return { x: canvasX, y: canvasY };
        }

        /*
        |--------------------------
        |  Clear Canvas
        |--------------------------
        |
        |
        |
        |
        |
        |
        |
        |
        */
        function clearCanvas() {
           
        }

     }

notice that you try to draw a circle from the center of the modal but it is below.

I already solved it in the following way:
return { x: canvasX - 40, y: canvasY - 200}