I'm having an issue where I'm trying to create a custom cursor/crosshair within my canvas. The issue I have is the specified Length, Width, and Gap given to the four rectangles to form the cursor is producing the incorrect amount of pixels for the center gap.
Live CodeSandbox: https://codesandbox.io/s/nifty-resonance-bcl0m
In the above example, measuring the cursors Length and Width is the correct amount but, the center gap is giving 10 pixels instead of 6 pixels (Gap * 2). I know the issue must be due to how I'm calculating the X/Y positions of each rectangle but I can't seem to find the correct formula that doesn't throw off the whole look of the cursor.
its happening because you are calculating the gap twice:
your code:
const length = 6;
const width = 4;
const gap = 3;
const x = 400 / 2;
const y = 400 / 2;
return (
<div className="App">
<Stage width={400} height={400}>
<Layer>
{/* Horizontal Rectangles */}
<Rect
x={x + (width / 2 + gap)}
y={y - width / 2}
width={length}
height={width}
fill="green"
/>
</layer>
</div>
when calculating the horizontaal length you are doing: (width / 2) + gap == (4/2) + 3 = 5. you can drop the width from the calculation to have a gap of 6