diff --git a/src/ol/render/canvas/canvasimmediate.js b/src/ol/render/canvas/canvasimmediate.js
index ed498a2eed..292604f106 100644
--- a/src/ol/render/canvas/canvasimmediate.js
+++ b/src/ol/render/canvas/canvasimmediate.js
@@ -40,9 +40,9 @@ ol.render.canvas.Immediate = function(context, extent, transform) {
 
   /**
    * @private
-   * @type {{fillStyle: ?ol.style.Fill,
-   *         imageStyle: ?ol.style.Image,
-   *         strokeStyle: ?ol.style.Stroke}}
+   * @type {{fillStyle: ol.style.Fill,
+   *         imageStyle: ol.style.Image,
+   *         strokeStyle: ol.style.Stroke}}
    */
   this.state_ = {
     fillStyle: null,
@@ -67,7 +67,7 @@ ol.render.canvas.Immediate.prototype.drawImages_ = function(geometry) {
   var context = this.context_;
   var imageStyle = this.state_.imageStyle;
   if (!ol.extent.intersects(this.extent_, geometry.getExtent()) ||
-      goog.isNull(imageStyle)) {
+      !goog.isDefAndNotNull(imageStyle)) {
     return;
   }
   var pixelCoordinates = ol.geom.transformGeometry2D(
@@ -164,7 +164,7 @@ ol.render.canvas.Immediate.prototype.drawMultiPointGeometry =
 ol.render.canvas.Immediate.prototype.drawLineStringGeometry =
     function(lineStringGeometry) {
   if (!ol.extent.intersects(this.extent_, lineStringGeometry.getExtent()) ||
-      goog.isNull(this.state_.strokeStyle)) {
+      !goog.isDefAndNotNull(this.state_.strokeStyle)) {
     return;
   }
   var context = this.context_;
@@ -183,7 +183,7 @@ ol.render.canvas.Immediate.prototype.drawMultiLineStringGeometry =
     function(multiLineStringGeometry) {
   var geometryExtent = multiLineStringGeometry.getExtent();
   if (!ol.extent.intersects(this.extent_, geometryExtent) ||
-      goog.isNull(this.state_.strokeStyle)) {
+      !goog.isDefAndNotNull(this.state_.strokeStyle)) {
     return;
   }
   var context = this.context_;
@@ -209,7 +209,8 @@ ol.render.canvas.Immediate.prototype.drawPolygonGeometry =
     return;
   }
   var state = this.state_;
-  if (goog.isNull(this.fillStyle) && goog.isNull(this.strokeStyle)) {
+  if (!goog.isDefAndNotNull(state.fillStyle) &&
+      !goog.isDefAndNotNull(state.strokeStyle)) {
     return;
   }
   var context = this.context_;
@@ -218,10 +219,10 @@ ol.render.canvas.Immediate.prototype.drawPolygonGeometry =
   var ends = polygonGeometry.getEnds();
   context.beginPath();
   this.drawRings_(pixelCoordinates, 0, ends);
-  if (!goog.isNull(state.fillStyle)) {
+  if (goog.isDefAndNotNull(state.fillStyle)) {
     context.fill();
   }
-  if (!goog.isNull(state.strokeStyle)) {
+  if (goog.isDefAndNotNull(state.strokeStyle)) {
     context.stroke();
   }
 };
@@ -236,7 +237,8 @@ ol.render.canvas.Immediate.prototype.drawMultiPolygonGeometry =
     return;
   }
   var state = this.state_;
-  if (goog.isNull(this.fillStyle) && goog.isNull(this.strokeStyle)) {
+  if (!goog.isDefAndNotNull(state.fillStyle) &&
+      !goog.isDefAndNotNull(state.strokeStyle)) {
     return;
   }
   var context = this.context_;
@@ -249,10 +251,10 @@ ol.render.canvas.Immediate.prototype.drawMultiPolygonGeometry =
     var ends = endss[i];
     context.beginPath();
     offset = this.drawRings_(pixelCoordinates, offset, ends);
-    if (!goog.isNull(state.fillStyle)) {
+    if (goog.isDefAndNotNull(state.fillStyle)) {
       context.fill();
     }
-    if (!goog.isNull(state.strokeStyle)) {
+    if (goog.isDefAndNotNull(state.strokeStyle)) {
       context.stroke();
     }
   }
@@ -267,12 +269,16 @@ ol.render.canvas.Immediate.prototype.setFillStrokeStyle =
   var context = this.context_;
   var state = this.state_;
   if (!ol.style.fill.equals(state.fillStyle, fillStyle)) {
-    context.fillStyle = fillStyle.color;
+    if (goog.isDefAndNotNull(fillStyle)) {
+      context.fillStyle = fillStyle.color;
+    }
     state.fillStyle = fillStyle;
   }
   if (!ol.style.stroke.equals(state.strokeStyle, strokeStyle)) {
-    context.strokeStyle = strokeStyle.color;
-    context.lineWidth = strokeStyle.width;
+    if (goog.isDefAndNotNull(strokeStyle)) {
+      context.strokeStyle = strokeStyle.color;
+      context.lineWidth = strokeStyle.width;
+    }
     state.strokeStyle = strokeStyle;
   }
 };
diff --git a/src/ol/render/canvas/canvasreplay.js b/src/ol/render/canvas/canvasreplay.js
index fd6a97a154..1c31debf7f 100644
--- a/src/ol/render/canvas/canvasreplay.js
+++ b/src/ol/render/canvas/canvasreplay.js
@@ -227,7 +227,7 @@ ol.render.canvas.ImageReplay = function() {
 
   /**
    * @private
-   * @type {?ol.style.Image}
+   * @type {ol.style.Image}
    */
   this.imageStyle_ = null;
 
@@ -255,7 +255,9 @@ ol.render.canvas.ImageReplay.prototype.drawCoordinates_ =
  */
 ol.render.canvas.ImageReplay.prototype.drawPointGeometry =
     function(pointGeometry) {
-  goog.asserts.assert(!goog.isNull(this.imageStyle_));
+  if (!goog.isDefAndNotNull(this.imageStyle_)) {
+    return;
+  }
   ol.extent.extend(this.extent_, pointGeometry.getExtent());
   var flatCoordinates = pointGeometry.getFlatCoordinates();
   var stride = pointGeometry.getStride();
@@ -271,7 +273,9 @@ ol.render.canvas.ImageReplay.prototype.drawPointGeometry =
  */
 ol.render.canvas.ImageReplay.prototype.drawMultiPointGeometry =
     function(multiPointGeometry) {
-  goog.asserts.assert(!goog.isNull(this.imageStyle_));
+  if (!goog.isDefAndNotNull(this.imageStyle_)) {
+    return;
+  }
   ol.extent.extend(this.extent_, multiPointGeometry.getExtent());
   var flatCoordinates = multiPointGeometry.getFlatCoordinates();
   var stride = multiPointGeometry.getStride();
@@ -311,9 +315,9 @@ ol.render.canvas.LineStringReplay = function() {
 
   /**
    * @private
-   * @type {{currentStrokeStyle: ?ol.style.Stroke,
+   * @type {{currentStrokeStyle: ol.style.Stroke,
    *         lastStroke: number,
-   *         strokeStyle: ?ol.style.Stroke}|null}
+   *         strokeStyle: ol.style.Stroke}|null}
    */
   this.state_ = {
     currentStrokeStyle: null,
@@ -336,15 +340,17 @@ goog.inherits(ol.render.canvas.LineStringReplay, ol.render.canvas.Replay);
 ol.render.canvas.LineStringReplay.prototype.drawFlatCoordinates_ =
     function(flatCoordinates, offset, end, stride) {
   var state = this.state_;
-  if (!ol.style.stroke.equals(state.currentStrokeStyle, state.strokeStyle)) {
+  var strokeStyle = state.strokeStyle;
+  goog.asserts.assert(goog.isDefAndNotNull(strokeStyle));
+  if (!ol.style.stroke.equals(state.currentStrokeStyle, strokeStyle)) {
     if (state.lastStroke != this.coordinates.length) {
       this.instructions.push([ol.render.canvas.Instruction.STROKE]);
       state.lastStroke = this.coordinates.length;
     }
     this.instructions.push(
-        [ol.render.canvas.Instruction.SET_STROKE_STYLE, state.strokeStyle],
+        [ol.render.canvas.Instruction.SET_STROKE_STYLE, strokeStyle],
         [ol.render.canvas.Instruction.BEGIN_PATH]);
-    state.currentStrokeStyle = state.strokeStyle;
+    state.currentStrokeStyle = strokeStyle;
   }
   var myEnd = this.appendFlatCoordinates(
       flatCoordinates, offset, end, stride, false);
@@ -358,7 +364,12 @@ ol.render.canvas.LineStringReplay.prototype.drawFlatCoordinates_ =
  */
 ol.render.canvas.LineStringReplay.prototype.drawLineStringGeometry =
     function(lineStringGeometry) {
-  goog.asserts.assert(!goog.isNull(this.state_));
+  var state = this.state_;
+  goog.asserts.assert(!goog.isNull(state));
+  var strokeStyle = state.strokeStyle;
+  if (!goog.isDefAndNotNull(strokeStyle)) {
+    return;
+  }
   ol.extent.extend(this.extent_, lineStringGeometry.getExtent());
   var flatCoordinates = lineStringGeometry.getFlatCoordinates();
   var stride = lineStringGeometry.getStride();
@@ -372,7 +383,12 @@ ol.render.canvas.LineStringReplay.prototype.drawLineStringGeometry =
  */
 ol.render.canvas.LineStringReplay.prototype.drawMultiLineStringGeometry =
     function(multiLineStringGeometry) {
-  goog.asserts.assert(!goog.isNull(this.state_));
+  var state = this.state_;
+  goog.asserts.assert(!goog.isNull(state));
+  var strokeStyle = state.strokeStyle;
+  if (!goog.isDefAndNotNull(strokeStyle)) {
+    return;
+  }
   ol.extent.extend(this.extent_, multiLineStringGeometry.getExtent());
   var ends = multiLineStringGeometry.getEnds();
   var flatCoordinates = multiLineStringGeometry.getFlatCoordinates();
@@ -423,10 +439,10 @@ ol.render.canvas.PolygonReplay = function() {
 
   /**
    * @private
-   * @type {{currentFillStyle: ?ol.style.Fill,
-   *         currentStrokeStyle: ?ol.style.Stroke,
-   *         fillStyle: ?ol.style.Fill,
-   *         strokeStyle: ?ol.style.Stroke}|null}
+   * @type {{currentFillStyle: ol.style.Fill,
+   *         currentStrokeStyle: ol.style.Stroke,
+   *         fillStyle: ol.style.Fill,
+   *         strokeStyle: ol.style.Stroke}|null}
    */
   this.state_ = {
     currentFillStyle: null,
@@ -463,10 +479,10 @@ ol.render.canvas.PolygonReplay.prototype.drawFlatCoordinatess_ =
   }
   // FIXME is it quicker to fill and stroke each polygon individually,
   // FIXME or all polygons together?
-  if (!goog.isNull(state.fillStyle)) {
+  if (goog.isDefAndNotNull(state.fillStyle)) {
     this.instructions.push([ol.render.canvas.Instruction.FILL]);
   }
-  if (!goog.isNull(state.strokeStyle)) {
+  if (goog.isDefAndNotNull(state.strokeStyle)) {
     this.instructions.push([ol.render.canvas.Instruction.STROKE]);
   }
   return offset;
@@ -478,7 +494,12 @@ ol.render.canvas.PolygonReplay.prototype.drawFlatCoordinatess_ =
  */
 ol.render.canvas.PolygonReplay.prototype.drawPolygonGeometry =
     function(polygonGeometry) {
-  goog.asserts.assert(!goog.isNull(this.state_));
+  var state = this.state_;
+  goog.asserts.assert(!goog.isNull(state));
+  if (!goog.isDefAndNotNull(state.fillStyle) &&
+      !goog.isDefAndNotNull(state.strokeStyle)) {
+    return;
+  }
   ol.extent.extend(this.extent_, polygonGeometry.getExtent());
   this.setFillStrokeStyles_();
   var ends = polygonGeometry.getEnds();
@@ -493,7 +514,12 @@ ol.render.canvas.PolygonReplay.prototype.drawPolygonGeometry =
  */
 ol.render.canvas.PolygonReplay.prototype.drawMultiPolygonGeometry =
     function(multiPolygonGeometry) {
-  goog.asserts.assert(!goog.isNull(this.state_));
+  var state = this.state_;
+  goog.asserts.assert(!goog.isNull(state));
+  if (!goog.isDefAndNotNull(state.fillStyle) &&
+      !goog.isDefAndNotNull(state.strokeStyle)) {
+    return;
+  }
   ol.extent.extend(this.extent_, multiPolygonGeometry.getExtent());
   this.setFillStrokeStyles_();
   var endss = multiPolygonGeometry.getEndss();
@@ -523,7 +549,6 @@ ol.render.canvas.PolygonReplay.prototype.finish = function() {
 ol.render.canvas.PolygonReplay.prototype.setFillStrokeStyle =
     function(fillStyle, strokeStyle) {
   goog.asserts.assert(!goog.isNull(this.state_));
-  goog.asserts.assert(!goog.isNull(fillStyle) || !goog.isNull(strokeStyle));
   this.state_.fillStyle = fillStyle;
   this.state_.strokeStyle = strokeStyle;
 };
@@ -534,13 +559,13 @@ ol.render.canvas.PolygonReplay.prototype.setFillStrokeStyle =
  */
 ol.render.canvas.PolygonReplay.prototype.setFillStrokeStyles_ = function() {
   var state = this.state_;
-  if (!goog.isNull(state.fillStyle) &&
+  if (goog.isDefAndNotNull(state.fillStyle) &&
       !ol.style.fill.equals(state.currentFillStyle, state.fillStyle)) {
     this.instructions.push(
         [ol.render.canvas.Instruction.SET_FILL_STYLE, state.fillStyle]);
     state.currentFillStyle = state.fillStyle;
   }
-  if (!goog.isNull(state.strokeStyle) &&
+  if (goog.isDefAndNotNull(state.strokeStyle) &&
       !ol.style.stroke.equals(state.currentStrokeStyle, state.strokeStyle)) {
     this.instructions.push(
         [ol.render.canvas.Instruction.SET_STROKE_STYLE, state.strokeStyle]);
diff --git a/src/ol/render/irender.js b/src/ol/render/irender.js
index af549b2883..8f5ffb6ffc 100644
--- a/src/ol/render/irender.js
+++ b/src/ol/render/irender.js
@@ -66,8 +66,8 @@ ol.render.IRender.prototype.drawPolygonGeometry =
 
 
 /**
- * @param {?ol.style.Fill} fillStyle Fill style.
- * @param {?ol.style.Stroke} strokeStyle Stroke style.
+ * @param {ol.style.Fill} fillStyle Fill style.
+ * @param {ol.style.Stroke} strokeStyle Stroke style.
  */
 ol.render.IRender.prototype.setFillStrokeStyle =
     function(fillStyle, strokeStyle) {
@@ -75,7 +75,7 @@ ol.render.IRender.prototype.setFillStrokeStyle =
 
 
 /**
- * @param {?ol.style.Image} imageStyle Image style.
+ * @param {ol.style.Image} imageStyle Image style.
  */
 ol.render.IRender.prototype.setImageStyle = function(imageStyle) {
 };
diff --git a/src/ol/shape.js b/src/ol/shape.js
index 5421ad6837..7eb2d3a7c0 100644
--- a/src/ol/shape.js
+++ b/src/ol/shape.js
@@ -11,8 +11,8 @@ goog.require('ol.style');
 
 /**
  * @param {number} radius Radius.
- * @param {?ol.style.Fill} fillStyle Fill style.
- * @param {?ol.style.Stroke} strokeStyle Stroke style.
+ * @param {ol.style.Fill} fillStyle Fill style.
+ * @param {ol.style.Stroke} strokeStyle Stroke style.
  * @return {ol.style.Image} Image.
  */
 ol.shape.renderCircle = function(radius, fillStyle, strokeStyle) {
diff --git a/src/ol/style.js b/src/ol/style.js
index a449fdd1af..f08a097c4c 100644
--- a/src/ol/style.js
+++ b/src/ol/style.js
@@ -12,20 +12,30 @@ goog.require('goog.functions');
 
 
 /**
- * @typedef {{color: string}}
+ * @typedef {{color: string}|null|undefined}
  */
 ol.style.Fill;
 
 
 /**
- * @param {?ol.style.Fill} fillStyle1 Fill style 1.
- * @param {?ol.style.Fill} fillStyle2 Fill style 2.
+ * @param {ol.style.Fill} fillStyle1 Fill style 1.
+ * @param {ol.style.Fill} fillStyle2 Fill style 2.
  * @return {boolean} Equals.
  */
 ol.style.fill.equals = function(fillStyle1, fillStyle2) {
-  return fillStyle1 === fillStyle2 || (
-      !goog.isNull(fillStyle1) && !goog.isNull(fillStyle2) &&
-      fillStyle1.color == fillStyle2.color);
+  if (goog.isDefAndNotNull(fillStyle1)) {
+    if (goog.isDefAndNotNull(fillStyle2)) {
+      return fillStyle1 === fillStyle2 || fillStyle1.color == fillStyle2.color;
+    } else {
+      return false;
+    }
+  } else {
+    if (goog.isDefAndNotNull(fillStyle2)) {
+      return false;
+    } else {
+      return true;
+    }
+  }
 };
 
 
@@ -34,35 +44,46 @@ ol.style.fill.equals = function(fillStyle1, fillStyle2) {
  *            image: (HTMLCanvasElement|HTMLVideoElement|Image),
  *            rotation: number,
  *            snapToPixel: (boolean|undefined),
- *            subtractViewRotation: boolean}}
+ *            subtractViewRotation: boolean}|null|undefined}
  */
 ol.style.Image;
 
 
 /**
  * @typedef {{color: string,
- *            width: number}}
+ *            width: number}|null|undefined}
  */
 ol.style.Stroke;
 
 
 /**
- * @param {?ol.style.Stroke} strokeStyle1 Stroke style 1.
- * @param {?ol.style.Stroke} strokeStyle2 Stroke style 2.
+ * @param {ol.style.Stroke} strokeStyle1 Stroke style 1.
+ * @param {ol.style.Stroke} strokeStyle2 Stroke style 2.
  * @return {boolean} Equals.
  */
 ol.style.stroke.equals = function(strokeStyle1, strokeStyle2) {
-  return strokeStyle1 === strokeStyle2 || (
-      !goog.isNull(strokeStyle1) && !goog.isNull(strokeStyle2) &&
-      strokeStyle1.color == strokeStyle2.color &&
-      strokeStyle1.width == strokeStyle2.width);
+  if (goog.isDefAndNotNull(strokeStyle1)) {
+    if (goog.isDefAndNotNull(strokeStyle2)) {
+      return strokeStyle1 === strokeStyle2 ||
+          (strokeStyle1.color == strokeStyle2.color &&
+           strokeStyle1.width == strokeStyle2.width);
+    } else {
+      return false;
+    }
+  } else {
+    if (goog.isDefAndNotNull(strokeStyle2)) {
+      return false;
+    } else {
+      return true;
+    }
+  }
 };
 
 
 /**
- * @typedef {{fill: ?ol.style.Fill,
- *            image: ?ol.style.Image,
- *            stroke: ?ol.style.Stroke,
+ * @typedef {{fill: ol.style.Fill,
+ *            image: ol.style.Image,
+ *            stroke: ol.style.Stroke,
  *            zIndex: (number|undefined)}}
  */
 ol.style.Style;