make image-rendering: pixelated work in firefox

set default scale back to 4x

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>

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!');
 }