diff --git a/index.html b/index.html
index 0be84f1..e4a10a2 100644
--- a/index.html
+++ b/index.html
@@ -15,6 +15,8 @@
         margin-bottom: 8px;
         padding: 1px;
         image-rendering: pixelated;
+        image-rendering: crisp-edges;
+        image-rendering: -moz-crisp-edges;
       }
     </style>
   </head>
diff --git a/main.js b/main.js
index 07f0ac6..b5c3887 100644
--- a/main.js
+++ b/main.js
@@ -157,6 +157,10 @@ class Graphics {
   constructor(canvas) {
     this.canvas_ = canvas;
     this.ctx_ = canvas.getContext('2d');
+    this.ctx_.imageSmoothingEnabled = false;
+    this.ctx_.mozImageSmoothingEnabled = false;
+    this.ctx_.webkitImageSmoothingEnabled = false;
+    this.ctx_.msImageSmoothingEnabled = false;
   }
 
   get width() {
@@ -185,7 +189,6 @@ class Graphics {
 
   // TODO: replace with custom sprite-based text rendering.
   text(string, x, y, size, color) {
-    this.ctx_.imageSmoothingEnabled = false;
     this.ctx_.fillStyle = color;
     this.ctx_.font = '' + size + 'px monospace';
     this.ctx_.fillText(string, x, y);
@@ -492,7 +495,7 @@ function init() {
   document.getElementById('3x').onclick = () => setCanvasScale(3);
   document.getElementById('4x').onclick = () => setCanvasScale(4);
   document.getElementById('5x').onclick = () => setCanvasScale(5);
-  setCanvasScale(3);
+  setCanvasScale(4);
   window.requestAnimationFrame(loop(world, gfx));
   debug('initialized!');
 }