title: HTML Canvas, Polygons are connected each other
body: <p>I am trying to generating multiple polygon from a quite large <code>json</code> file. The polygon should separate each other, but it somehow connected each other.</p>
  <p><a href="https://i.stack.imgur.com/Ce216.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ce216.png" alt="polygons" /></a></p>
  <p>I am building it in next.js.</p>
  <p>Here are the codes:</p>
  <p><code>Canvas.tsx</code></p>
  <pre><code>// ../components/Canvas.tsx
  
  import React, { useRef, useEffect } from 'react'
  
  const Canvas = props =&gt; {
    
    const canvasRef = useRef(null)
    
    useEffect(() =&gt; {
      const canvas: any = canvasRef.current
      const context = canvas.getContext('2d')
  
      context.fillStyle = '#FF0000'
      context.beginPath()
      { props.x.map((pointx, i) =&gt; context.lineTo(0.25 * pointx, 0.25 * props.y[i])) } // I scaled it to 0.25 (25% original size)
      context.closePath()
      context.fill()
    }, [])
    
    return &lt;canvas ref={canvasRef} {...props} width={props.width} height={props.height} style={{ zIndex: 20, position: 'absolute', objectFit: 'contain' }}/&gt;
  }
  
  export default Canvas
  
  </code></pre>
  <p><code>index.tsx</code></p>
  <pre><code>import React, { ReactElement, useEffect, useRef, useState } from 'react'
  import Image from 'next/image'
  import dynamic from &quot;next/dynamic&quot;;
  import data from '../public/11_regions-copy.json'
  import Canvas from '../components/Canvas';
  
  
  export const getServerSideProps = async () =&gt; {
  
    let xTemp: any[] = []
    let yTemp: any[] = []
  
    for (var i = 0; i &lt; Object.keys(data).length; i++) {
      xTemp.push(data[i].all_points_x)
      yTemp.push(data[i].all_points_y)
    }
    for (var j = 0; j &lt; Object.keys(data).length; j++) {
      let xArray = xTemp[j]
      xArray.push(xArray[0])
  
      let yArray = yTemp[j]
      yArray.push(yArray[0])
    }
    
    let x = [].concat.apply([], xTemp);
    let y = [].concat.apply([], yTemp);
  
  
    return {
      props: {
        x,
        y
      },
    }
  }
  
  function Home({ x, y, xTemp1, yTemp1 }: any): ReactElement {
  
    return (
      &lt;div&gt;
        &lt;Canvas width={1680} height={756} x={x} y={y} /&gt;
      &lt;/div&gt;
    )
  }
  
  export default Home
  </code></pre>
  <p>the <code>json</code> file:
  <a href="https://github.com/konvajs/react-konva/files/7167202/11_regions-copy.json.zip" rel="nofollow noreferrer">json</a></p>
  <p>Anyone have any ideas?</p>