Use the default fill and stroke color

src/ol/style/regularshape.js

@@ -322,7 +322,11 @@ ol.style.RegularShape.prototype.render_ = function(atlasManager) {
   var strokeWidth = 0;
 
   if (this.stroke_) {
-    strokeStyle = ol.colorlike.asColorLike(this.stroke_.getColor());
+    strokeStyle = this.stroke_.getColor();
+    if (strokeStyle === null) {
+      strokeStyle = ol.render.canvas.defaultStrokeStyle;
+    }
+    strokeStyle = ol.colorlike.asColorLike(strokeStyle);
     strokeWidth = this.stroke_.getWidth();
     if (strokeWidth === undefined) {
       strokeWidth = ol.render.canvas.defaultLineWidth;
@@ -442,7 +446,11 @@ ol.style.RegularShape.prototype.draw_ = function(renderOptions, context, x, y) {
 
 
   if (this.fill_) {
-    context.fillStyle = ol.colorlike.asColorLike(this.fill_.getColor());
+    var color = this.fill_.getColor();
+    if (color === null) {
+      color = ol.render.canvas.defaultFillStyle;
+    }
+    context.fillStyle = ol.colorlike.asColorLike(color);
     context.fill();
   }
   if (this.stroke_) {

test_rendering/spec/ol/style/regularshape.test.js

@@ -37,93 +37,115 @@ describe('ol.rendering.style.RegularShape', function() {
     return map;
   }
 
+  function createFeatures(stroke, fill) {
+
+    var feature;
+    feature = new ol.Feature({
+      geometry: new ol.geom.Point([-15, 15])
+    });
+    // square
+    feature.setStyle(new ol.style.Style({
+      image: new ol.style.RegularShape({
+        fill: fill,
+        stroke: stroke,
+        points: 4,
+        radius: 10,
+        angle: Math.PI / 4
+      })
+    }));
+    vectorSource.addFeature(feature);
+
+    feature = new ol.Feature({
+      geometry: new ol.geom.Point([8, 15])
+    });
+    // triangle
+    feature.setStyle(new ol.style.Style({
+      image: new ol.style.RegularShape({
+        fill: fill,
+        stroke: stroke,
+        points: 3,
+        radius: 10,
+        rotation: Math.PI / 4,
+        angle: 0
+      })
+    }));
+    vectorSource.addFeature(feature);
+
+    feature = new ol.Feature({
+      geometry: new ol.geom.Point([-10, -8])
+    });
+    // star
+    feature.setStyle(new ol.style.Style({
+      image: new ol.style.RegularShape({
+        fill: fill,
+        stroke: stroke,
+        points: 5,
+        radius: 10,
+        radius2: 4,
+        angle: 0
+      })
+    }));
+    vectorSource.addFeature(feature);
+
+    feature = new ol.Feature({
+      geometry: new ol.geom.Point([12, -8])
+    });
+    // cross
+    feature.setStyle(new ol.style.Style({
+      image: new ol.style.RegularShape({
+        fill: fill,
+        stroke: stroke,
+        points: 4,
+        radius: 10,
+        radius2: 0,
+        angle: 0
+      })
+    }));
+    vectorSource.addFeature(feature);
+  }
+
+
   describe('#render', function() {
+    var stroke = new ol.style.Stroke({width: 2});
+    var fill = new ol.style.Fill({color: 'red'});
+
     afterEach(function() {
       disposeMap(map);
     });
 
-    function createFeatures() {
-      var stroke = new ol.style.Stroke({color: 'black', width: 2});
-      var fill = new ol.style.Fill({color: 'red'});
-
-      var feature;
-      feature = new ol.Feature({
-        geometry: new ol.geom.Point([-15, 15])
-      });
-      // square
-      feature.setStyle(new ol.style.Style({
-        image: new ol.style.RegularShape({
-          fill: fill,
-          stroke: stroke,
-          points: 4,
-          radius: 10,
-          angle: Math.PI / 4
-        })
-      }));
-      vectorSource.addFeature(feature);
-
-      feature = new ol.Feature({
-        geometry: new ol.geom.Point([8, 15])
-      });
-      // triangle
-      feature.setStyle(new ol.style.Style({
-        image: new ol.style.RegularShape({
-          fill: fill,
-          stroke: stroke,
-          points: 3,
-          radius: 10,
-          rotation: Math.PI / 4,
-          angle: 0
-        })
-      }));
-      vectorSource.addFeature(feature);
-
-      feature = new ol.Feature({
-        geometry: new ol.geom.Point([-10, -8])
-      });
-      // star
-      feature.setStyle(new ol.style.Style({
-        image: new ol.style.RegularShape({
-          fill: fill,
-          stroke: stroke,
-          points: 5,
-          radius: 10,
-          radius2: 4,
-          angle: 0
-        })
-      }));
-      vectorSource.addFeature(feature);
-
-      feature = new ol.Feature({
-        geometry: new ol.geom.Point([12, -8])
-      });
-      // cross
-      feature.setStyle(new ol.style.Style({
-        image: new ol.style.RegularShape({
-          fill: fill,
-          stroke: stroke,
-          points: 4,
-          radius: 10,
-          radius2: 0,
-          angle: 0
-        })
-      }));
-      vectorSource.addFeature(feature);
-    }
-
     it('tests the canvas renderer', function(done) {
       map = createMap('canvas');
-      createFeatures();
+      createFeatures(stroke, fill);
-      expectResemble(map, 'spec/ol/style/expected/regularshape-canvas.png',
+      expectResemble(map, 'spec/ol/style/expected/regularshape-canvas.png', 9.4, done);
-          9.4, done);
     });
 
     it('tests the WebGL renderer', function(done) {
       assertWebGL();
       map = createMap('webgl');
-      createFeatures();
+      createFeatures(stroke, fill);
-      expectResemble(map, 'spec/ol/style/expected/regularshape-webgl.png',
+      expectResemble(map, 'spec/ol/style/expected/regularshape-webgl.png', 8.2, done);
-          8.2, done);
+    });
+  });
+
+  describe('uses the default fill and stroke color', function() {
+    var stroke = new ol.style.Stroke();
+    var fill = new ol.style.Fill();
+
+    afterEach(function() {
+      disposeMap(map);
+    });
+
+    it('tests the canvas renderer', function(done) {
+      map = createMap('canvas');
+      createFeatures(stroke, fill);
+      expectResemble(map, 'spec/ol/style/expected/regularshape-canvas-default-style.png', 3.0, done);
+    });
+
+    it('tests the WebGL renderer', function(done) {
+      assertWebGL();
+      map = createMap('webgl');
+      createFeatures(stroke, fill);
+      expectResemble(map, 'spec/ol/style/expected/regularshape-webgl-default-style.png', 3.0, done);
     });
   });
 });