Odd width value producing blurry lines for custom shape

Question

Facing an issue where setting my shape's width value to an odd number produces blurry lines. I'm well aware of several other posts that explain the reasoning and an approach to fix the issue, by adding 0.5 (half a pixel) to your X and Y value. In my use case simply adding 0.5 doesn't fully solve my issue.

I think the reason for my issue is that I have two shapes that work together to form one custom shape. In my case I use two rectangles, the first rectangle acts as a border around the second rectangle. Both of these rectangles have the ability to change their width to different values. The issue is for example if the border rectangle has an odd number and the second rectangle has an even number (or vice versa) I can't seem to get both of them to have straight lines. The overall goal is to have it where it doesn't matter what the width of the two rectangles is, just that the lines for both have to be straight.

From looking through the other similar posts some say to translate the canvas itself by 0.5 than I don't have to worry about setting the individual X and Y values, while I haven't been able to find a translate function for Konva I tried some other similar ways but nothing seemed to work. What I tried recently was creating a function to simply determine if a given value (rectangle width) is odd or even then simply return 0.5 or not. This function does kinda work but it still seems to produce blurry lines if both of the widths aren't odd or even. The only thing worrying me about this approach is in my actual use case I'll have 20 or more custom shapes that will all have their own border width and shape width, so I'm not sure if applying that function to each of their X and Y is the most efficient way.

I'm not sure if I'm just taking the wrong approach in fixing both of the lines of the custom shape or if there is a simpler way to handle this issue.

CodeSandbox: https://codesandbox.io/s/kind-ride-pcs2fj