Openlayers geometry shapes looks distorted on zoom out

Question

The right image is full zoom in circle whose outline seems distortedI have drawn a circle geometry with Openlayers and the circle is displayed in map . The circle is zoomed when i zoom in/out but on zoom out the circle looks distorted and not perfectly circle after two zoom outs.

I have drawn the circle geometry as per below and update its coordinates dynamic values

var circleFeature = new ol.Feature
    ({
      geometry: new ol.geom.Circle([0, 0], 0.4)
    });

circleStyle = new ol.style.Style({
                stroke: new ol.style.Stroke({
                    color: '#FFCC00',
                    width: 2,
                    lineDash: [0, 0]
                }),         
                zIndex: 3,
              });

circleFeature.setGeometry(new ol.geom.Circle([100, 110], 0.4));

As in below image u can see the circle (or any geometry) to be distored or pixelated on zoom out. On full zoom in the stroke outline seems to have some gaps in stroke color fill. I expect my geometries as in eg: https://openlayers.org/en/latest/examples/draw-shapes.html. But in my case it not working so

Answer 1

I'm not sure why you are using linedash [0, 0] - if you don't want dashes leave it undefined. If a feature is going to appear very small when displayed (as when zoomed out) using linedash will produce a poor result. Perhaps you should replace the circleStyle with a style function which calculates the displayed size and only dashes the result when it is going to be big enough to be seen clearly

circleStyle = new ol.style.Style({
                stroke: new ol.style.Stroke({
                    color: '#FF0000',
                    width: 2
                }),         
                zIndex: 3,
              });


circleStyleFunction = function(feature, resolution) {
  var geometry = feature.getGeometry();
  var displayRadius;
  if (geometry.getType() = 'Circle') {
    displayRadius = feature.getGeometry().getRadius() / resolution;
  } 
  circleStyle.getStroke().setLineDash( displayRadius >= 10 ? [5, 5] : undefined );
  return circleStyle;
}