Calculating the correct gap between custom cursor

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.

Answer

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