openlayers - mouse cursor and draw pointer do not match

When I'm drawing a line in canvas, it seems the mouse position doesn't match with the canvas position, so whenever I draw, there is some distance between my cursor and the drawing line .. please help me with this problem, here is my code :

$.ajax({
    async:true,
    cache:false,
    type:"POST",
    dataType: 'jsonp',
    url:encodeURI("http://www.khoa.go.kr/oceanmap/BASEMAP/otmsBasemapApi.do?ServiceKey="),
    data:{},
    success:function(response) {
        //console.log(response);
        init();
    },
    error:function(response) {
    }
});

function init(){
    
    var options = {
        projection : new OpenLayers.Projection("EPSG:5179"), 
        displayProjection: new OpenLayers.Projection("EPSG:4326"),
        maxExtent : new OpenLayers.Bounds(-200000.0, -3015.4524155292, 3803015.45241553, 4000000.0),
        restrictedExtent : new OpenLayers.Bounds(37953.1466, 1126946.7253, 2152527.8074, 2873292.7040),
        center : new OpenLayers.LonLat(mapCenterX, mapCenterY),
        allOverlays: true,
        maxResolution : 1954.597389,
        numZoomLevels: numZoomLevels,
        zoom : zoomLevel,
        minZoom : minZoomLevel,
        transitionEffect : null,
        layers : [ OtmsLayer ],
        controls: [],
        };
    
    map = new OpenLayers.Map('mapWriteBiz${ajaxId}', options);     
         
    map.zoomToExtent( mapBounds.transform(map.displayProjection, map.projection ) );
  
    map.setCenter([mapCenterX,mapCenterY], minZoomLevel);
    
    map.zoomTo(1);
    
    map.addControl(new OpenLayers.Control.Navigation({
                    'zoomWheelEnabled': false,
                    'defaultDblClick': function ( evt ) { 
                        return; 
                     }                  
                    })
                    );
   
    var btnModifyFeature = new OpenLayers.Control.Button({
        displayClass: 'olControlModifyFeature',
        title: "",
        id: 'btnModifyFeature${ajaxId}',
        trigger: modifyFeature,
        });  
    
    var btnDeleteFeature = new OpenLayers.Control.Button({
        displayClass: 'olControlDrawFeature',
        title: "",
        id: 'btnDeleteFeature${ajaxId}',
        trigger: deleteFeature,
        });
     
    var panel = new OpenLayers.Control.Panel({top: 'auto', defaultControl: btnModifyFeature});
    
    panel.addControls([btnModifyFeature, btnDeleteFeature]);
      
    map.addControl(panel);
    
    setDefaultFeatureControls();    
}