draw Segmentation mask using ReactJs

Question

I have a JSON data that has the data like bbox and segmentation data i can able to use the bbox data to draw box but i don't know how to use the segmentation data to draw segmentation mask on my image any help or guide to be much appreciated . I have upload my code and JSON below

React Code:

    import React, { useRef, useEffect,useState } from 'react';
     import './App.css'
    import Boundingbox from "react-bounding-box"
    
    import 'bootstrap/dist/css/bootstrap.min.css';
    
    
    
    function App() {
      const [data,setData]=useState([]);
      const canvas = useRef();
      let ctx = null;
    
    
    
        // initialize the canvas context
        useEffect(() => {
          // dynamically assign the width and height to canvas
          const canvasEle = canvas.current;
          canvasEle.width = canvasEle.clientWidth;
          canvasEle.height = canvasEle.clientHeight;
       
          // get context of the canvas
          ctx = canvasEle.getContext("2d");
        }, []);
    
        const drawRect = (info, style = {}) => {
          const { x, y, w, h } = info;
          const { borderColor = 'black', borderWidth = 1 } = style;
       
          ctx.beginPath();
          ctx.strokeStyle = borderColor;
          ctx.lineWidth = borderWidth;
          ctx.rect(x, y, w, h);
          ctx.stroke();
        }
     
      const getData=()=>{
        fetch('/test.json'
        ,{
          headers : { 
            'Content-Type': 'application/json',
            'Accept': 'application/json'
           }
        }
        )
          .then(function(response){
            console.log(response)
            return response.json();
          })
          .then(function(myJson) {
            console.log(myJson.annotations[0].bbox);
            setData(myJson.annotations[1].bbox)
 const x1 = myJson.annotations[2].bbox[0];
        const y1 = myJson.annotations[2].bbox[1];
        const w1= myJson.annotations[2].bbox[2];  
        const h1 = myJson.annotations[2].bbox[3];
        const r1Info = { x:x1 , y:y1, w:w1, h:h1  };
        const r1Style = { borderColor: 'red', borderWidth: 5 };
        drawRect(r1Info, r1Style);
      });
          });
    
          
      }
      useEffect(()=>{
        getData()
       
    
      },[])
      // draw rectangle
    
     
      
    
     
      return (
        <div className="App">
          
          <canvas style={{height:"512px" ,width:"512px",backgroundImage:`url(${"https://karthiknbucket1.s3.ap-southeast-1.amazonaws.com/00000001.png"})`,
        backgroundPosition:"center",backgroundSize:"100% 100%"
        }}ref={canvas}></canvas>
    
        
    
        </div>
        
      );
    }
     
    export default App;

My JSON:

"annotations": [
{
"segmentation": [
[
354,
216.5,
359.5,
213,
361.5,
209,
360.5,
162,
362.5,
148,
353,
143.5,
348,
143.5,
346,
145.5,
338.5,
147,
338.5,
151,
341.5,
158,
340.5,
182,
342.5,
194,
342.5,
213,
345,
216.5,
354,
216.5
]
],
"iscrowd": 0,
"image_id": 0,
"category_id": 1,
"id": 0,
"bbox": [
338.5,
143.5,
24,
73
],
"area": 1394.5
},

I really want to know how to use that data to plot segmentation mask on images so kindly guide or help me how to do that. as of the code above i can draw bounding box on my images and i want to add the segmentation mask please help me