diff --git a/js/controller/DrawingController.js b/js/controller/DrawingController.js
index d428bac2..7aeeb7e3 100644
--- a/js/controller/DrawingController.js
+++ b/js/controller/DrawingController.js
@@ -1,44 +1,44 @@
 (function () {
-	var ns = $.namespace("pskl.controller");
-	ns.DrawingController = function (framesheet, container, dpi) {
-		// TODO(vincz): Store user prefs in a localstorage string ?
-		var renderingOptions = {
-			"dpi": dpi,
-			"hasGrid" : true
-		};
+  var ns = $.namespace("pskl.controller");
+  ns.DrawingController = function (framesheet, container, dpi) {
+    // TODO(vincz): Store user prefs in a localstorage string ?
+    var renderingOptions = {
+      "dpi": dpi,
+      "hasGrid" : true
+    };
 
-		/**
-		 * @public
-		 */
-		this.framesheet = framesheet;
-		
-		/**
-		 * @public
-		 */
-		this.overlayFrame = pskl.model.Frame.createEmptyFromFrame(framesheet.getCurrentFrame());
+    /**
+     * @public
+     */
+    this.framesheet = framesheet;
+    
+    /**
+     * @public
+     */
+    this.overlayFrame = pskl.model.Frame.createEmptyFromFrame(framesheet.getCurrentFrame());
 
-		/**
-		 * @private
-		 */
-		this.container = container;
-		
-		this.renderer = new pskl.rendering.FrameRenderer(this.container, renderingOptions, "drawing-canvas");
-		this.overlayRenderer = new pskl.rendering.FrameRenderer(this.container, renderingOptions, "canvas-overlay");
-		
-		this.renderer.init(framesheet.getCurrentFrame());
-		this.overlayRenderer.init(this.overlayFrame);
+    /**
+     * @private
+     */
+    this.container = container;
+    
+    this.renderer = new pskl.rendering.FrameRenderer(this.container, renderingOptions, "drawing-canvas");
+    this.overlayRenderer = new pskl.rendering.FrameRenderer(this.container, renderingOptions, "canvas-overlay");
+    
+    this.renderer.init(framesheet.getCurrentFrame());
+    this.overlayRenderer.init(this.overlayFrame);
 
-		// State of drawing controller:
-		this.isClicked = false;
-		this.isRightClicked = false;
-		this.previousMousemoveTime = 0;
-		this.currentToolBehavior = null;
-		this.primaryColor =  Constants.DEFAULT_PEN_COLOR;
-		this.secondaryColor =  Constants.TRANSPARENT_COLOR;
+    // State of drawing controller:
+    this.isClicked = false;
+    this.isRightClicked = false;
+    this.previousMousemoveTime = 0;
+    this.currentToolBehavior = null;
+    this.primaryColor =  Constants.DEFAULT_PEN_COLOR;
+    this.secondaryColor =  Constants.TRANSPARENT_COLOR;
 
-		this.initMouseBehavior();
+    this.initMouseBehavior();
 
-		$.subscribe(Events.TOOL_SELECTED, $.proxy(function(evt, toolBehavior) {
+    $.subscribe(Events.TOOL_SELECTED, $.proxy(function(evt, toolBehavior) {
       console.log("Tool selected: ", toolBehavior);
       this.currentToolBehavior = toolBehavior;
     }, this));
@@ -51,22 +51,22 @@
         this.secondaryColor = color;
       }
     }, this));
-	};
+  };
 
-	ns.DrawingController.prototype.initMouseBehavior = function() {
-		var body = $('body');
+  ns.DrawingController.prototype.initMouseBehavior = function() {
+    var body = $('body');
         this.container.mousedown($.proxy(this.onMousedown_, this));
         this.container.mousemove($.proxy(this.onMousemove_, this));
         body.mouseup($.proxy(this.onMouseup_, this));
         
         // Deactivate right click:
         this.container.contextmenu(this.onCanvasContextMenu_);
-	};
+  };
 
-	/**
-	 * @private
-	 */
-	ns.DrawingController.prototype.onMousedown_ = function (event) {
+  /**
+   * @private
+   */
+  ns.DrawingController.prototype.onMousedown_ = function (event) {
       this.isClicked = true;
       
       if(event.button == 2) { // right click
@@ -87,8 +87,8 @@
     };
 
     /**
-	 * @private
-	 */
+   * @private
+   */
     ns.DrawingController.prototype.onMousemove_ = function (event) {
       var currentTime = new Date().getTime();
       // Throttling of the mousemove event:
@@ -102,7 +102,7 @@
             this.framesheet.getCurrentFrame(),
             this.overlayFrame
           );
-		  
+      
           // TODO(vincz): Find a way to move that to the model instead of being at the interaction level.
           // Eg when drawing, it may make sense to have it here. However for a non drawing tool,
           // you don't need to draw anything when mousemoving and you request useless localStorage.
@@ -121,8 +121,8 @@
     };
 
     /**
-	 * @private
-	 */
+   * @private
+   */
     ns.DrawingController.prototype.onMouseup_ = function (event) {
       if(this.isClicked || this.isRightClicked) {
         // A mouse button was clicked on the drawing canvas before this mouseup event,
@@ -147,8 +147,8 @@
     },
 
     /**
-	 * @private
-	 */
+   * @private
+   */
     ns.DrawingController.prototype.getRelativeCoordinates = function (clientX, clientY) {
       var canvasPageOffset = this.container.offset();
       return {
@@ -158,16 +158,16 @@
     };
 
     /**
-	 * @private
-	 */
+   * @private
+   */
     ns.DrawingController.prototype.getSpriteCoordinates = function(event) {
         var coords = this.getRelativeCoordinates(event.clientX, event.clientY);
         return this.renderer.convertPixelCoordinatesIntoSpriteCoordinate(coords);
     };
 
     /**
-	 * @private
-	 */
+   * @private
+   */
     ns.DrawingController.prototype.getCurrentColor_ = function () {
       if(this.isRightClicked) {
         return this.secondaryColor;
@@ -177,45 +177,44 @@
     };
 
     /**
-	 * @private
-	 */
+   * @private
+   */
     ns.DrawingController.prototype.onCanvasContextMenu_ = function (event) {
       event.preventDefault();
       event.stopPropagation();
       event.cancelBubble = true;
       return false;
     };
-	
-	ns.DrawingController.prototype.updateDPI = function (newDPI) {
-		this.renderer.updateDPI(newDPI);
-		this.overlayRenderer.updateDPI(newDPI);
-
-		this.render();
-	};
-
-  ns.DrawingController.prototype.render = function () {
-    try {
-      this.renderFrame();
-      this.renderOverlay();
-    } catch (e) {
-      // TODO : temporary t/c for integration
-    }
+  
+  ns.DrawingController.prototype.updateDPI = function (newDPI) {
+    this.renderer.updateDPI(newDPI);
+    this.overlayRenderer.updateDPI(newDPI);
+    this.forceRendering_();
   };
 
-	ns.DrawingController.prototype.renderFrame = function () {
+  ns.DrawingController.prototype.render = function () {
+    this.renderFrame();
+    this.renderOverlay();
+  };
+
+  ns.DrawingController.prototype.renderFrame = function () {
     var frame = this.framesheet.getCurrentFrame();
     var serializedFrame = frame.serialize();
     if (this.serializedFrame != serializedFrame) {
-      this.serializedFrame = serializedFrame
-		  this.renderer.render(frame);
+      this.serializedFrame = serializedFrame;
+      this.renderer.render(frame);
     }
-	};
+  };
 
-	ns.DrawingController.prototype.renderOverlay = function () {
+  ns.DrawingController.prototype.renderOverlay = function () {
     var serializedOverlay = this.overlayFrame.serialize();
     if (this.serializedOverlay != serializedOverlay) {
-      this.serializedOverlay = serializedOverlay
+      this.serializedOverlay = serializedOverlay;
       this.overlayRenderer.render(this.overlayFrame);
     }
-	};
+  };
+
+  ns.DrawingController.prototype.forceRendering_ = function () {
+    this.serializedFrame = this.serializedOverlay = null;
+  }
 })();
\ No newline at end of file
diff --git a/js/piskel.js b/js/piskel.js
index ab587525..3bc7ba6a 100644
--- a/js/piskel.js
+++ b/js/piskel.js
@@ -17,8 +17,7 @@ $.namespace("pskl");
       framePixelHeight = 32,
 
       // Scaling factors for a given frameSheet rendering:
-      // Main drawing area:
-      drawingCanvasDpi = 20,   
+      // Main drawing area dpi is calculated dynamically
       // Canvas preview film canvases:
       previewTileCanvasDpi = 4,
       // Animated canvas preview:
@@ -30,15 +29,14 @@ $.namespace("pskl");
   var piskel = {
 
     init : function () {
-      piskel.initDPIs_();
-
       frameSheet = new pskl.model.FrameSheet(framePixelWidth, framePixelHeight);
       frameSheet.addEmptyFrame();
+      frameSheet.setCurrentFrameIndex(0);
       
       this.drawingController = new pskl.controller.DrawingController(
         frameSheet,
         $('#drawing-canvas-container'), 
-        drawingCanvasDpi
+        this.calculateDPIsForDrawingCanvas_()
       );
 
       this.animationController = new pskl.controller.AnimatedPreviewController(
@@ -47,7 +45,6 @@ $.namespace("pskl");
         previewAnimationCanvasDpi
       );
 
-
       this.previewsController = new pskl.controller.PreviewFilmController(
         frameSheet,
         $('#preview-list'), 
@@ -63,10 +60,6 @@ $.namespace("pskl");
       // in a second batch.
       this.selectionManager =
           new pskl.selection.SelectionManager(this.drawingController.overlayFrame);
-      
-      frameSheet.setCurrentFrameIndex(0);
-
-      
 
       this.animationController.init();
       this.previewsController.init();
@@ -92,6 +85,8 @@ $.namespace("pskl");
       var drawingLoop = new pskl.rendering.DrawingLoop();
       drawingLoop.addCallback(this.render, this);
       drawingLoop.start();
+
+      this.connectResizeToDpiUpdate_();
     },
 
     render : function (delta) {
@@ -100,18 +95,18 @@ $.namespace("pskl");
       this.previewsController.render(delta);
     },
 
-    /**
-     * Override default DPIs.
-     * @private
-     */
-    initDPIs_ : function() {
-      drawingCanvasDpi = piskel.calculateDPIsForDrawingCanvas_();
-      // TODO(vincz): Add throttling on window.resize event.
-      $(window).resize($.proxy(function() {
-        drawingCanvasDpi = piskel.calculateDPIsForDrawingCanvas_();
-        this.drawingController.updateDPI(drawingCanvasDpi);
-      }, this));
-      // TODO(vincz): Check for user settings eventually from localstorage.
+    connectResizeToDpiUpdate_ : function () {
+      $(window).resize($.proxy(this.startDPIUpdateTimer_, this));
+    },
+
+    startDPIUpdateTimer_ : function () {
+      if (this.dpiUpdateTimer) window.clearInterval(this.dpiUpdateTimer);
+      this.dpiUpdateTimer = window.setTimeout($.proxy(this.updateDPIForViewport, this), 200);
+    },
+
+    updateDPIForViewport : function () {
+      var dpi = piskel.calculateDPIsForDrawingCanvas_();
+      this.drawingController.updateDPI(dpi);
     },
 
     /**