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 {