Avoid antialiasing in more scenarios

Enable aliasing (nearest neighbor scaling) for more scenarios. This improves quality at some scales of the canvas and device pixel ratios, by re-enabling aliasing. In particular this avoids a browser bug in chrome where the canvas will jump back and forth between being antialiased and aliased, but only for these certain scenarios. Any time it's antialiased, it can also exhibit this bug in chrome.

src/app.js

@@ -157,7 +157,10 @@ storage.get({
 	$canvas_area.trigger("resize");
 });
 
-$G.on("resize", update_grid); // for browser zoom, and in-app zoom of the canvas
+$G.on("resize", function(){ // for browser zoom, and in-app zoom of the canvas
+	update_grid();
+	update_disable_aa();
+});
 
 $("body").on("dragover dragenter", function(e){
 	var dt = e.originalEvent.dataTransfer;

src/functions.js

@@ -15,6 +15,11 @@ function update_grid() {
 		draw_grid_and_tool_previews(helper_layer.canvas.ctx, scale, scale);
 	}
 }
+function update_disable_aa() {
+	var dots_per_canvas_px = window.devicePixelRatio * magnification;
+	var round = Math.floor(dots_per_canvas_px) === dots_per_canvas_px;
+	$canvas.toggleClass("disable-aa", dots_per_canvas_px >= 3 || round);
+}
 
 function set_magnification(scale){
 	magnification = scale;

styles/themes/classic.css

@@ -21,12 +21,13 @@
 		image-rendering: crisp-edges;
 		image-rendering: pixelated;
 		image-rendering: -moz-crisp-edges;
-		/* only works on macOS, and not on a standards track: */
-		/* font-smooth: none;
-		-webkit-font-smoothing: none; */
-		/* also may cause the text to be completely unreadable https://github.com/1j01/jspaint/issues/130 */
 	}
 }
+.disable-aa {
+	image-rendering: crisp-edges;
+	image-rendering: pixelated;
+	image-rendering: -moz-crisp-edges;
+}
 
 .selection:after,
 .textbox:after {

styles/themes/modern.css

@@ -23,6 +23,11 @@ body {
 		image-rendering: -moz-crisp-edges;
 	}
 }
+.disable-aa {
+	image-rendering: crisp-edges;
+	image-rendering: pixelated;
+	image-rendering: -moz-crisp-edges;
+}
 
 .selection:after,
 .textbox:after {