From 6ac691e9bdcc08bf4ffdc15cd03204c95ae706f5 Mon Sep 17 00:00:00 2001
From: Isaiah Odhner <isaiahodhner@gmail.com>
Date: Mon, 30 Sep 2019 14:23:20 -0400
Subject: [PATCH] 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                | 5 ++++-
 src/functions.js          | 5 +++++
 styles/themes/classic.css | 9 +++++----
 styles/themes/modern.css  | 5 +++++
 4 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/app.js b/src/app.js
index c931858..c4dfe0d 100644
--- a/src/app.js
+++ b/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;
diff --git a/src/functions.js b/src/functions.js
index 21f6988..d3e30b4 100644
--- a/src/functions.js
+++ b/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;
diff --git a/styles/themes/classic.css b/styles/themes/classic.css
index 991edfe..e4068bc 100644
--- a/styles/themes/classic.css
+++ b/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 {
diff --git a/styles/themes/modern.css b/styles/themes/modern.css
index 63e92c0..79dfa3d 100644
--- a/styles/themes/modern.css
+++ b/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 {