Blended/Anti-Aliased edges on rectangle tool about jspaint HOT 4 CLOSED

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,

from jspaint.

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.

from jspaint.

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

from jspaint.

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

from jspaint.