diff --git a/js/controller/AnimatedPreviewController.js b/js/controller/AnimatedPreviewController.js
index 0bb60dd7..c8b7f51a 100644
--- a/js/controller/AnimatedPreviewController.js
+++ b/js/controller/AnimatedPreviewController.js
@@ -1,14 +1,16 @@
 (function () {
 	var ns = $.namespace("pskl.controller");
 	ns.AnimatedPreviewController = function (framesheet, container, dpi) {
-		this.dpi = dpi;
 		this.framesheet = framesheet;
 		this.container = container;
 		this.animIndex = 0;
 
 		this.fps = parseInt($("#preview-fps")[0].value, 10);
 
-		this.renderer = new pskl.rendering.FrameRenderer(this.container, this.dpi);
+		var renderingOptions = {
+			"dpi": dpi
+		};
+		this.renderer = new pskl.rendering.FrameRenderer(this.container, renderingOptions);
 	};
 
 	ns.AnimatedPreviewController.prototype.init = function () {
diff --git a/js/controller/DrawingController.js b/js/controller/DrawingController.js
index a71e5eb3..d0741280 100644
--- a/js/controller/DrawingController.js
+++ b/js/controller/DrawingController.js
@@ -3,14 +3,19 @@
 	ns.DrawingController = function (frame, container, dpi) {
 		this.dpi = dpi;
 
+		var renderingOptions = {
+			"dpi": dpi,
+			"displayGrid": true // Retrieve from localsotrage config 
+		}
+
 		// Public
 		this.frame = frame;
 		this.overlayFrame = pskl.model.Frame.createEmptyFromFrame(frame); // Type is frame
 
 		// Private
 		this.container = container;
-		this.renderer = new pskl.rendering.FrameRenderer(this.container, dpi, "drawing-canvas");
-		this.overlayRenderer = new pskl.rendering.FrameRenderer(this.container, dpi, "canvas-overlay");
+		this.renderer = new pskl.rendering.FrameRenderer(this.container, renderingOptions, "drawing-canvas");
+		this.overlayRenderer = new pskl.rendering.FrameRenderer(this.container, renderingOptions, "canvas-overlay");
 		//this.mainCanvas = this.createMainCanvas();
 		//this.overlayCanvas = this.createOverlayCanvas();
 		this.renderer.init(this.frame);
diff --git a/js/controller/PreviewFilmController.js b/js/controller/PreviewFilmController.js
index 8f218d53..8317066e 100644
--- a/js/controller/PreviewFilmController.js
+++ b/js/controller/PreviewFilmController.js
@@ -5,8 +5,6 @@
 		this.dpi = dpi;
 		this.framesheet = framesheet;
 		this.container = container;
-
-		//this.renderer = new pskl.rendering.FrameRenderer(this.container, dpi);
 	};
 
 	ns.PreviewFilmController.prototype.init = function() {
@@ -189,7 +187,8 @@
 		
 		// TODO(vincz): Eventually optimize this part by not recreating a FrameRenderer. Note that the real optim
 		// is to make this update function (#createPreviewTile) less aggressive.
-		var currentFrameRenderer = new pskl.rendering.FrameRenderer(canvasContainer, this.dpi, "tile-view");
+		var renderingOptions = {"dpi": this.dpi };
+		var currentFrameRenderer = new pskl.rendering.FrameRenderer(canvasContainer, renderingOptions, "tile-view");
 		currentFrameRenderer.init(currentFrame);
 		
 		previewTileRoot.appendChild(canvasContainer);
diff --git a/js/rendering/FrameRenderer.js b/js/rendering/FrameRenderer.js
index 55d51b65..56089285 100644
--- a/js/rendering/FrameRenderer.js
+++ b/js/rendering/FrameRenderer.js
@@ -4,17 +4,18 @@
 	this.dpi = null;
 	this.canvas = null;
 
-	ns.FrameRenderer = function (container, dpi, className) {
+	ns.FrameRenderer = function (container, renderingOptions, className) {
 		if(container == undefined) {
 			throw "Bad FrameRenderer initialization. <container> undefined.";
 		}
+		this.container = container;
 
-		if(dpi == undefined || isNaN(dpi)) {
+		if(renderingOptions == undefined || renderingOptions.dpi == undefined || isNaN(dpi)) {
 			throw "Bad FrameRenderer initialization. <dpi> not well defined.";
 		}
 
-		this.container = container;
-		this.dpi = dpi;
+		this.displayGrid = !!renderingOptions.displayGrid;
+		this.dpi = renderingOptions.dpi;
 		this.className = className;
 	};