diff --git a/src/octoprint/static/gcodeviewer/js/renderer.js b/src/octoprint/static/gcodeviewer/js/renderer.js
index a374724a..af78b030 100644
--- a/src/octoprint/static/gcodeviewer/js/renderer.js
+++ b/src/octoprint/static/gcodeviewer/js/renderer.js
@@ -182,74 +182,97 @@ GCODE.renderer = (function(){
     };
 
     var drawGrid = function() {
-        console.log("Drawing grid");
-
         ctx.translate(offsetBedX, offsetBedY);
+        if(renderOptions["bed"]["circular"]) {
+            drawCircularGrid();
+        } else {
+            drawRectangularGrid();
+        }
+        ctx.translate(-offsetBedX, -offsetBedY);
+    };
 
+    var drawRectangularGrid = function() {
+        var i;
+        var width = renderOptions["bed"]["x"] * zoomFactor;
+        var height = renderOptions["bed"]["y"] * zoomFactor;
+        var origin = {
+            x: 0,
+            y: -1 * renderOptions["bed"]["y"] * zoomFactor
+        };
+
+        ctx.beginPath();
+        ctx.strokeStyle = renderOptions["colorGrid"];
+        ctx.fillStyle = "#ffffff";
+        ctx.lineWidth = 2;
+
+        ctx.rect(origin.x, origin.y, width, height);
+
+        ctx.fill();
+        ctx.stroke();
+
+        ctx.strokeStyle = renderOptions["colorGrid"];
+        ctx.lineWidth = 1;
+
+        ctx.beginPath();
+        for (i = 0; i <= renderOptions["bed"]["x"]; i += gridStep) {
+            ctx.moveTo(i * zoomFactor, 0);
+            ctx.lineTo(i * zoomFactor, -1 * renderOptions["bed"]["y"] * zoomFactor);
+        }
+        ctx.stroke();
+
+        ctx.beginPath();
+        for (i = 0; i <= renderOptions["bed"]["y"]; i += gridStep) {
+            ctx.moveTo(0, -1 * i * zoomFactor);
+            ctx.lineTo(renderOptions["bed"]["x"] * zoomFactor, -1 * i * zoomFactor);
+        }
+        ctx.stroke();
+    };
+
+    var drawCircularGrid = function() {
         var i;
 
-        if(renderOptions["bed"]["circular"]) {
-            ctx.strokeStyle = renderOptions["colorGrid"];
-            ctx.fillStyle = "#ffffff";
-            ctx.lineWidth = 2;
+        ctx.strokeStyle = renderOptions["colorGrid"];
+        ctx.fillStyle = "#ffffff";
+        ctx.lineWidth = 2;
 
-            ctx.beginPath();
-            ctx.arc(0, 0, renderOptions["bed"]["r"] * zoomFactor, 0, Math.PI * 2, true);
-            ctx.fill();
-            ctx.stroke();
+        //~~ bed outline & origin
+        ctx.beginPath();
 
-            ctx.strokeStyle = renderOptions["colorGrid"];
-            ctx.lineWidth = 1;
+        // outline
+        ctx.arc(0, 0, renderOptions["bed"]["r"] * zoomFactor, 0, Math.PI * 2, true);
 
-            ctx.beginPath();
-            for (i = -renderOptions["bed"]["r"]; i <= renderOptions["bed"]["r"]; i += gridStep) {
-                var x = i;
-                var y = Math.sqrt(Math.pow(renderOptions["bed"]["r"], 2) - Math.pow(x, 2));
+        // origin
+        ctx.moveTo(-1 * renderOptions["bed"]["r"] * zoomFactor, 0);
+        ctx.lineTo(renderOptions["bed"]["r"] * zoomFactor, 0);
+        ctx.moveTo(0, -1 * renderOptions["bed"]["r"] * zoomFactor);
+        ctx.lineTo(0, renderOptions["bed"]["r"] * zoomFactor);
 
-                ctx.moveTo(x * zoomFactor, y * zoomFactor);
-                ctx.lineTo(x * zoomFactor, -1 * y * zoomFactor);
+        // draw
+        ctx.fill();
+        ctx.stroke();
 
-                ctx.moveTo(y * zoomFactor, x * zoomFactor);
-                ctx.lineTo(-1 * y * zoomFactor, x * zoomFactor);
-            }
-            ctx.stroke();
-        } else {
-            var width = renderOptions["bed"]["x"] * zoomFactor;
-            var height = renderOptions["bed"]["y"] * zoomFactor;
-            var origin = {
-                x: 0,
-                y: -1 * renderOptions["bed"]["y"] * zoomFactor
-            };
+        ctx.strokeStyle = renderOptions["colorGrid"];
+        ctx.lineWidth = 1;
 
-            ctx.beginPath();
-            ctx.strokeStyle = renderOptions["colorGrid"];
-            ctx.fillStyle = "#ffffff";
-            ctx.lineWidth = 2;
+        //~~ grid starting from origin
+        ctx.beginPath();
+        for (i = 0; i <= renderOptions["bed"]["r"]; i += gridStep) {
+            var x = i;
+            var y = Math.sqrt(Math.pow(renderOptions["bed"]["r"], 2) - Math.pow(x, 2));
 
-            ctx.rect(origin.x, origin.y, width, height);
+            ctx.moveTo(x * zoomFactor, y * zoomFactor);
+            ctx.lineTo(x * zoomFactor, -1 * y * zoomFactor);
 
-            ctx.fill();
-            ctx.stroke();
+            ctx.moveTo(y * zoomFactor, x * zoomFactor);
+            ctx.lineTo(-1 * y * zoomFactor, x * zoomFactor);
 
-            ctx.strokeStyle = renderOptions["colorGrid"];
-            ctx.lineWidth = 1;
+            ctx.moveTo(-1 * x * zoomFactor, y * zoomFactor);
+            ctx.lineTo(-1 * x * zoomFactor, -1 * y * zoomFactor);
 
-            ctx.beginPath();
-            for (i = 0; i <= renderOptions["bed"]["x"]; i += gridStep) {
-                ctx.moveTo(i * zoomFactor, 0);
-                ctx.lineTo(i * zoomFactor, -1 * renderOptions["bed"]["y"] * zoomFactor);
-            }
-            ctx.stroke();
-
-            ctx.beginPath();
-            for (i = 0; i <= renderOptions["bed"]["y"]; i += gridStep) {
-                ctx.moveTo(0, -1 * i * zoomFactor);
-                ctx.lineTo(renderOptions["bed"]["x"] * zoomFactor, -1 * i * zoomFactor);
-            }
-            ctx.stroke();
+            ctx.moveTo(y * zoomFactor, -1 * x * zoomFactor);
+            ctx.lineTo(-1 * y * zoomFactor, -1 * x * zoomFactor);
         }
-
-        ctx.translate(-offsetBedX, -offsetBedY);
+        ctx.stroke();
     };
 
     var drawLayer = function(layerNum, fromProgress, toProgress, isNotCurrentLayer){
@@ -371,10 +394,12 @@ GCODE.renderer = (function(){
     };
 
     var applyOffsets = function(mdlInfo) {
+        var canvasCenter;
+
         // determine bed and model offsets
         if (ctx) ctx.translate(-offsetModelX, -offsetModelY);
         if (renderOptions["centerViewport"] || renderOptions["zoomInOnModel"]) {
-            var canvasCenter = ctx.transformedPoint(canvas.width / 2, canvas.height / 2);
+            canvasCenter = ctx.transformedPoint(canvas.width / 2, canvas.height / 2);
             if (mdlInfo) {
                 offsetModelX = canvasCenter.x - (mdlInfo.min.x + mdlInfo.modelSize.x / 2) * zoomFactor;
                 offsetModelY = canvasCenter.y + (mdlInfo.min.y + mdlInfo.modelSize.y / 2) * zoomFactor;
@@ -390,8 +415,8 @@ GCODE.renderer = (function(){
             offsetBedX = -1 * (renderOptions["bed"]["x"] / 2 - (mdlInfo.min.x + mdlInfo.modelSize.x / 2)) * zoomFactor;
             offsetBedY = (renderOptions["bed"]["y"] / 2 - (mdlInfo.min.y + mdlInfo.modelSize.y / 2)) * zoomFactor;
         } else if (renderOptions["bed"]["circular"]) {
-            var canvasCenter = ctx.transformedPoint(canvas.width / 2, canvas.height / 2);
-            offsetModelX =  canvasCenter.x;
+            canvasCenter = ctx.transformedPoint(canvas.width / 2, canvas.height / 2);
+            offsetModelX = canvasCenter.x;
             offsetModelY = canvasCenter.y;
             offsetBedX = 0;
             offsetBedY = 0;
@@ -438,10 +463,19 @@ GCODE.renderer = (function(){
             var bedWidth = renderOptions["bed"]["x"];
             var bedHeight = renderOptions["bed"]["y"];;
             if(renderOptions["bed"]["circular"]) {
-                bedWidth = bedHeight = renderOptions["bed"]["r"] *2;
+                bedWidth = bedHeight = renderOptions["bed"]["r"] * 2;
             }
             zoomFactor = Math.min((canvas.width - 10) / bedWidth, (canvas.height - 10) / bedHeight);
-            ctx.translate((canvas.width - bedWidth * zoomFactor) / 2, bedHeight * zoomFactor + (canvas.height - bedHeight * zoomFactor) / 2);
+
+            var translationX, translationY;
+            if (renderOptions["bed"]["circular"]) {
+                translationX = canvas.width / 2;
+                translationY = canvas.height / 2;
+            } else {
+                translationX = (canvas.width - bedWidth * zoomFactor) / 2;
+                translationY = bedHeight * zoomFactor + (canvas.height - bedHeight * zoomFactor) / 2;
+            }
+            ctx.translate(translationX, translationY);
 
             offsetModelX = 0;
             offsetModelY = 0;