From c5cf78424ce58c0e7bb81c7de882641ec9dc30ae Mon Sep 17 00:00:00 2001 From: milksteakjellybeans <106365477+milksteakjellybeans@users.noreply.github.com> Date: Thu, 9 Nov 2023 18:02:00 -0800 Subject: [PATCH] Update tools.js's TOOL_RECTANGLE so that rectangles have sharp edges, working around weirdness in latest Firefox As discussed in https://github.com/1j01/jspaint/issues/326, the drawing of rectangles show a blurred/anti-aliased edge in the recent versions of Firefox. This change restores sharp edges in Firefox. The change is modeled after how the existing code handles the degenerate case of drawing the rectangle (when the rectangle is either not as tall or not as wide as double the rectangle line width), but this version just draws four rectangles, one for each side. --- src/tools.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/tools.js b/src/tools.js index 9a46f84..4f89495 100644 --- a/src/tools.js +++ b/src/tools.js @@ -842,8 +842,13 @@ ctx.fillRect(x, y, w, h); ctx.restore(); } else { - // @TODO: shouldn't that be ~~(stroke_size / 2)? - ctx.strokeRect(x + stroke_size / 2, y + stroke_size / 2, w - stroke_size, h - stroke_size); + ctx.save(); + ctx.fillStyle = ctx.strokeStyle; + ctx.fillRect(x, y, stroke_size, h); + ctx.fillRect(x+w-stroke_size, y, stroke_size, h); + ctx.fillRect(x, y, w, stroke_size); + ctx.fillRect(x, y+h-stroke_size, w, stroke_size); + ctx.restore(); } } },