Blended/Anti-Aliased edges on rectangle tool

[milksteakjellybeans]

I don't recall for sure if this is how the original mspaint tool worked, but in jspaint I'm seeing that the rectangle tool has a blended / anti-aliased edge. I seem to recall the rectangle tool making a sharp edge. I tried out the online emulator as per the contributing doc and see no blending in that version, it's got a sharp edge there. The polygon tool, ellipse and rounded rec tool don't have the same blending in jspaint that the rectangle tool has.

Would this be considered a bug?

I went ahead and "fixed" this locally

[milksteakjellybeans]

Looks like this happens in Firefox (117.0.1) but not Safari (latest), so maybe it's a bug on the Firefox side.

Here's the hack I used to have sharp edges in Firefox (and still Safari), if anyone finds themself in the same boat,

src/tools.js

845,846c845,851
<                   // @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();

And here's a shot of the box tool in Firefox at each line width (with View -> Zoom -> Large Size selected), to see what I mean,

[1j01]

This is a bug due to some unknown changes in Firefox. I would pinpoint the changes with git bisect but Firefox apparently takes 30GB of disk space to compile from source code.

Your fix looks good, and I would accept a PR with your changes. Or I could commit it and give you credit in the commit message.

Alternatives considered:

• Could use draw_polygon since a rectangle is a polygon, but getting the stroke lined up by its outside rather than its center would require offsetting it, and draw_polygon currently requires WebGL. I would rather reduce the need for WebGL, rather than expand it, since WebGL can crash.
• The following works in Firefox 119.0, but not in Chrome, and I wouldn't be surprised if it broke in the future:

  const offset = Math.round(stroke_size / 2) + (stroke_size % 2 === 0 ? 0.5 : 0);
  ctx.strokeRect(x + offset, y + offset, w - stroke_size, h - stroke_size);

  It would probably be slightly faster, but they say premature optimization is the root of all evil.

[milksteakjellybeans]

Hi, thank you for your consideration and reply. I'll put together a PR shortly.

[milksteakjellybeans]

My first PR, hope I've done it correctly. Have a good day