diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js
index d1c404b..15a0978 100644
--- a/src/core/renderers/canvas/CanvasRenderer.js
+++ b/src/core/renderers/canvas/CanvasRenderer.js
@@ -57,6 +57,24 @@
     this.clearBeforeRender = options.clearBeforeRender;
 
     /**
+     * The background color as a number.
+     *
+     * @member {number}
+     * @private
+     */
+    this._backgroundColor = 0x000000;
+
+    /**
+     * The background color as a string.
+     *
+     * @member {string}
+     * @private
+     */
+    this._backgroundColorString = '#000000';
+
+    this.backgroundColor = options.backgroundColor || this._backgroundColor; // run bg color setter
+
+    /**
      * Whether the render view is transparent
      *
      * @member {boolean}
@@ -167,6 +185,24 @@
 CanvasRenderer.prototype.constructor = CanvasRenderer;
 module.exports = CanvasRenderer;
 
+Object.defineProperties(CanvasRenderer.prototype, {
+    /**
+     * The background color to fill if not transparent
+     *
+     * @member {number}
+     * @memberof CanvasRenderer#
+     */
+    backgroundColor: {
+        get: function () {
+            return this._backgroundColor;
+        },
+        set: function (val) {
+            this._backgroundColor = val;
+            this._backgroundColorString = utils.hex2string(val);
+        }
+    }
+});
+
 /**
  * Renders the object to this canvas view
  *
@@ -192,7 +228,7 @@
             this.context.clearRect(0, 0, this.width, this.height);
         }
         else {
-            this.context.fillStyle = object.backgroundColorString;
+            this.context.fillStyle = this._backgroundColorString;
             this.context.fillRect(0, 0, this.width , this.height);
         }
     }

diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js
index d1c404b..15a0978 100644
--- a/src/core/renderers/canvas/CanvasRenderer.js
+++ b/src/core/renderers/canvas/CanvasRenderer.js
@@ -57,6 +57,24 @@
     this.clearBeforeRender = options.clearBeforeRender;
 
     /**
+     * The background color as a number.
+     *
+     * @member {number}
+     * @private
+     */
+    this._backgroundColor = 0x000000;
+
+    /**
+     * The background color as a string.
+     *
+     * @member {string}
+     * @private
+     */
+    this._backgroundColorString = '#000000';
+
+    this.backgroundColor = options.backgroundColor || this._backgroundColor; // run bg color setter
+
+    /**
      * Whether the render view is transparent
      *
      * @member {boolean}
@@ -167,6 +185,24 @@
 CanvasRenderer.prototype.constructor = CanvasRenderer;
 module.exports = CanvasRenderer;
 
+Object.defineProperties(CanvasRenderer.prototype, {
+    /**
+     * The background color to fill if not transparent
+     *
+     * @member {number}
+     * @memberof CanvasRenderer#
+     */
+    backgroundColor: {
+        get: function () {
+            return this._backgroundColor;
+        },
+        set: function (val) {
+            this._backgroundColor = val;
+            this._backgroundColorString = utils.hex2string(val);
+        }
+    }
+});
+
 /**
  * Renders the object to this canvas view
  *
@@ -192,7 +228,7 @@
             this.context.clearRect(0, 0, this.width, this.height);
         }
         else {
-            this.context.fillStyle = object.backgroundColorString;
+            this.context.fillStyle = this._backgroundColorString;
             this.context.fillRect(0, 0, this.width , this.height);
         }
     }
diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js
index a7981c7..b617cda 100644
--- a/src/core/renderers/webgl/WebGLRenderer.js
+++ b/src/core/renderers/webgl/WebGLRenderer.js
@@ -238,6 +238,12 @@
 utils.eventTarget.mixin(WebGLRenderer.prototype);
 
 Object.defineProperties(WebGLRenderer.prototype, {
+    /**
+     * The background color to fill if not transparent
+     *
+     * @member {number}
+     * @memberof WebGLRenderer#
+     */
     backgroundColor: {
         get: function () {
             return this._backgroundColor;
@@ -304,7 +310,7 @@
             gl.clearColor(0, 0, 0, 0);
         }
         else {
-            gl.clearColor(object.backgroundColorSplit[0], object.backgroundColorSplit[1], object.backgroundColorSplit[2], 1);
+            gl.clearColor(this._backgroundColorRgb[0], this._backgroundColorRgb[1], this._backgroundColorRgb[2], 1);
         }
 
         gl.clear(gl.COLOR_BUFFER_BIT);

diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js
index d1c404b..15a0978 100644
--- a/src/core/renderers/canvas/CanvasRenderer.js
+++ b/src/core/renderers/canvas/CanvasRenderer.js
@@ -57,6 +57,24 @@
     this.clearBeforeRender = options.clearBeforeRender;
 
     /**
+     * The background color as a number.
+     *
+     * @member {number}
+     * @private
+     */
+    this._backgroundColor = 0x000000;
+
+    /**
+     * The background color as a string.
+     *
+     * @member {string}
+     * @private
+     */
+    this._backgroundColorString = '#000000';
+
+    this.backgroundColor = options.backgroundColor || this._backgroundColor; // run bg color setter
+
+    /**
      * Whether the render view is transparent
      *
      * @member {boolean}
@@ -167,6 +185,24 @@
 CanvasRenderer.prototype.constructor = CanvasRenderer;
 module.exports = CanvasRenderer;
 
+Object.defineProperties(CanvasRenderer.prototype, {
+    /**
+     * The background color to fill if not transparent
+     *
+     * @member {number}
+     * @memberof CanvasRenderer#
+     */
+    backgroundColor: {
+        get: function () {
+            return this._backgroundColor;
+        },
+        set: function (val) {
+            this._backgroundColor = val;
+            this._backgroundColorString = utils.hex2string(val);
+        }
+    }
+});
+
 /**
  * Renders the object to this canvas view
  *
@@ -192,7 +228,7 @@
             this.context.clearRect(0, 0, this.width, this.height);
         }
         else {
-            this.context.fillStyle = object.backgroundColorString;
+            this.context.fillStyle = this._backgroundColorString;
             this.context.fillRect(0, 0, this.width , this.height);
         }
     }
diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js
index a7981c7..b617cda 100644
--- a/src/core/renderers/webgl/WebGLRenderer.js
+++ b/src/core/renderers/webgl/WebGLRenderer.js
@@ -238,6 +238,12 @@
 utils.eventTarget.mixin(WebGLRenderer.prototype);
 
 Object.defineProperties(WebGLRenderer.prototype, {
+    /**
+     * The background color to fill if not transparent
+     *
+     * @member {number}
+     * @memberof WebGLRenderer#
+     */
     backgroundColor: {
         get: function () {
             return this._backgroundColor;
@@ -304,7 +310,7 @@
             gl.clearColor(0, 0, 0, 0);
         }
         else {
-            gl.clearColor(object.backgroundColorSplit[0], object.backgroundColorSplit[1], object.backgroundColorSplit[2], 1);
+            gl.clearColor(this._backgroundColorRgb[0], this._backgroundColorRgb[1], this._backgroundColorRgb[2], 1);
         }
 
         gl.clear(gl.COLOR_BUFFER_BIT);
diff --git a/src/core/utils/index.js b/src/core/utils/index.js
index 8a515f6..ade9831 100644
--- a/src/core/utils/index.js
+++ b/src/core/utils/index.js
@@ -37,6 +37,19 @@
     },
 
     /**
+     * Converts a hex color number to a string.
+     *
+     * @param hex {number}
+     * @return {string} The string color.
+     */
+    hex2string: function (hex) {
+        hex = hex.toString(16);
+        hex = '000000'.substr(0, 6 - hex.length) + hex;
+
+        return '#' + hex;
+    },
+
+    /**
      * Converts a color as an [R, G, B] array to a hex number
      *
      * @param rgb {number[]}