geoserver - Why text labeling is blur when export to pdf ol5

Here is my code that displays wms image on map.

filter="VILL_NAME" + "=" + "'" +cad+ "'"+ " AND TEH_NAME" + "=" +"'" +tahsil+ "'"+ " AND DIST_NAME" + "=" +"'" +dist+ "'";
          cadLayer =new ol.layer.Image({
                    name: 'Cad layer',
              source: new ol.source.ImageWMS({
                   ratio: 1,
                url: 'http://localhost:8080/geoserver/wms',
                params: {
                    'LAYERS': 'soil_health:RAIPUR_CAD_WITH_VILL_NAME_WGS84',

                    'VERSION': '1.1.1',
                    'FORMAT': 'image/png',
                    'TRANSPARENT': true,
                    'TILED': true,
                    'cql_filter':filter
                    },

                serverType: 'geoserver'                                            
              })});
              map.addLayer(cadLayer);

and here is my code to export map to pdf.

var dims = {
  a0: [1189, 841],
  a1: [841, 594],
  a2: [594, 420],
  a3: [420, 297],
  a4: [297, 210],
  a5: [210, 148]
  };


  var exportElement =  document.getElementById("export-pdf");
  exportElement.addEventListener('click', function(e) {

        exportElement.disabled = true;
        document.body.style.cursor = 'progress';

  var format = document.getElementById('format').value;
  var resolution = document.getElementById('resolution').value;
  var buttonLabelElement = document.getElementById('button-label');

  var label = buttonLabelElement.innerText;
 var scale = 4000;

var mapView = map.getView();
var mapProjection = mapView.getProjection();
var mapResolutionAtEquator = mapView.getResolution();
var viewCenter = mapView.getCenter();
var mapPointResolution = ol.proj.getPointResolution(mapProjection, mapResolutionAtEquator, viewCenter);

var dim = dims[format];

var width = Math.round(dim[0] * resolution / 25.4);
var height = Math.round(dim[1] * resolution / 25.4);
var size = map.getSize();
var extent = map.getView().calculateExtent(size);

var mapView = map.getView();
var mapProjection = mapView.getProjection();
var mapResolutionAtEquator = mapView.getResolution();
var viewCenter = mapView.getCenter();
var mapResolutionAtEquator = mapView.getResolution();

var mapPointResolution = ol.proj.getPointResolution(mapProjection, mapResolutionAtEquator, viewCenter);
var mapResolutionFactor = mapResolutionAtEquator / mapPointResolution;
var pdf_name = dist + "_" + tahsil + "_"+village+ ".pdf";
map.once('rendercomplete', function(event) {

               // WriteLegendtoCanvas(event);
     buttonLabelElement.innerText = label;
      var canvas = event.context.canvas;
      /* event.context.textAlign = 'left';
        event.context.fillText('© My Copyright Text', canvas.width - 5, canvas.height - 5);*/

      var data = canvas.toDataURL('image/jpeg');
      var pdf = new jsPDF('landscape', undefined, format);
      pdf.addImage(data, 'JPEG', 0, 0, dim[0], dim[1]);
      pdf.save(pdf_name);
      map.setSize(size);
      map.getView().fit(extent, size);
      map.renderSync();
      exportElement.disabled = false;
          document.body.style.cursor = 'auto';
}); 



var printPointResolution = (scale * 25.4) /(resolution * 1000); 
var printResolutionAtEquator = mapResolutionFactor * printPointResolution;
var printZoom = mapView.getZoomForResolution(printResolutionAtEquator);        

map.setSize([width, height]);

mapView.setZoom(printZoom);
  map.renderSync();

}, false);

but when i open pdf my map is ok but text labeling is blur up to some extent. It is not clear up to the mark.

here i add sld or style for this layer in geoserver when i publish the map.Here is my sld code.

 xsi:schemaLocation="http://www.opengis.net/sld StyledLayerDescriptor.xsd" 
 xmlns="http://www.opengis.net/sld" 
 xmlns:ogc="http://www.opengis.net/ogc" 


 xmlns:xlink="http://www.w3.org/1999/xlink" 
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
  
  
    default_polygon
    
    
      
      A sample style that draws a polygon

      
      
      
        
          rule1
          
          A polygon with a gray fill and a 1 pixel black outline
          
            
              

            
            
              #000000
              0.5
            
          
        
      
       
     


       
         
           KIDZ
         
         
           #FF0000
         
       
     

   
    
  

Can anyone tell why text labelling is blur here.