バグ再現

オンラインデモで現象を確認してみましょう。新しいタブで開くとより見やすいです：

このデモでは、JavaScriptでSVGのpathを模倣してCanvasに描画しています：

<div class="color-info">
  <strong>Current Colors:</strong>
  <span class="color-watch" id="fillWatch"></span>
  Fill: <span id="fillColor"></span>
  <span class="color-watch" id="strokeWatch"></span>
  Stroke: <span id="strokeColor"></span>
</div>

元のSVG構造はこちらです：

<svg width="146" height="2532" viewBox="0 0 146 2532" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M145.998 0.00012207H122.36V2968.18H145.998V0.00012207Z" fill="${stroke}"/>
  <path d="M23.6375 0H0V2968.18H23.6375V0Z" fill="${stroke}"/>
  <path d="M122.364 0.00012207H23.6396V2968.18H122.364V0.00012207Z" fill="${fill}"/>
</svg>

原因

pathの座標や幅が小数値であると、Canvasでピクセル単位に変換する際にズレが生じます。
ブラウザのCanvasはアンチエイリアシング処理（ぼかし）を使って描画するため、ぴったり隣り合っているはずの矩形間に隙間が発生してしまうのです。

今回のような直線だけで構成される場合は、座標を整数に修正することで、ある程度対応が可能です。しかし、波線や曲線などpathが複雑な場合は調整がかなり難しくなります：

解決策

以下のような対策が考えられます：

SVGのpathの幅や座標を整数に揃える（Figmaなどでも設定可能）。
SVGをPNG画像として書き出して使用する。
- 特に波線など、細かい調整が難しい場合に見た目上は完璧な結果が得られます。
- ただし、色パターンが多数ある場合は汎用性が低くなります。

同じような現象でお悩みの方の参考になれば幸いです！