How to dynamically assign a value to canvas to draw a rectangle according to the data coordinates of json

the following complete code, I am now writing a json, in which boundingBox corresponds to four angular coordinates, how to parse those four coordinates and assign values to the following canvas to draw four points of the rectangle, so that the background gives different json coordinates and draws different rectangles. Should canvas be encapsulated as a function? I think the canvas rectangles encapsulated on the Internet are filled with width and height, not coordinates.

<!DOCTYPE html>   
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/default.css">
    <link rel="stylesheet" href="css/upload.css">
    <title>Document</title>
</head>
<body>
<div class="container">
    <div class="title">
        
    </div>
    <div class="txt">
        <span></span>
    </div>
    <div class="content">
        <div id="left">
            <div class="img-box">
                <canvas id="cvs"></canvas>
            </div> 
            <a href="" id="jump">
                
                <input type="file" id="chooseImage" name="file" accept="image/*">
            </a>  
        </div>
        <div class="right">
            <div class="tabs">
                <div>
                    <input type="radio" id="r-1" name="tab" checked>
                    <label for="r-1" class="label-1"></label>
                    <div class="mod-1">
                            <table border="0" cellspacing="0">
                            <thead>
                                <tr>
                                    <th rowspan="2" class="result-num"></th>
                                    <th rowspan="2" class="result-content"></th>
                                    <th colspan="4">
                                        
                                    </th>
                                </tr>
                                <tr>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody>
                                <!--  -->
                            </tbody>
                        </table>          
                    </div>
                </div>       
                <div>
                    <input type="radio" id="r-2" name="tab">
                    <label for="r-2" class="label-2">JSON</label>
                    <div class="mod-2">
                        <pre class="result">


< / div >
< / div >
< / div >
< / div >
< / div >
< / div >

< script src= "js/jquery.min.js" > < / script >
< script >
$(function () {
$("- sharpchooseImage"). On ("change",function () {
Var file = this.files [0];
Var image = new Image ();
Image.src = URL.createObjectURL (file);
Image.onload = function () {
Var canvas = document.querySelector ("- sharpcvs");
Var ctx = canvas.getContext ("2d");
Canvas.width = image.width; / / sets the canvas width of canvas to the width of the picture
Canvas.height = image.height;
Ctx.drawImage (image, 0,0image.width.image.height) / / draw pictures on canvas
/ / let dataUrl = canvas.toDataURL (image,0.92) / / 0.92 is the compression ratio, which can be set as needed. Setting it too small will affect the image quality.
Ctx.strokeStyle= "red";
Var json= {
"orientation": "UP",
"errorCode": "0",
"lines": [
{
"boundingBox": "48, 58, 188, 59, 187, 88, 48, 87",
"words": "name Network Xiaoyi"
},
{
"boundingBox": "47, 106, 264, 106, 264, 134, 134, 46134."
"words": "gender male nationality"
},
{
"boundingBox": "46, 152, 328, 151, 327, 177, 45178."
"words": "June 01, 19970"
},
{
"boundingBox": "44,195pr. 371, 195pr. 371, 224pr 43224."
"words": "address 10, Wangdong Road, Northwest, Haidian District, Beijing"
},
{
"boundingBox": "109224364224363253109253",
"words": "No. 7, West District, Zhongguancun Software Park."
},
{
"boundingBox": "47, 315, 535, 316, 534, 343, 46342,"
"words": "Citizen ID card number 110101199706010022"
}
]
}
Var obj=eval (json);
For (var i = 0; I < obj.lines.length; iPP) {
Console.log (obj. Lines [I] .boundingBox);
}
Ctx.moveTo (485.58);
Ctx.lineTo (188. 59);
Ctx.lineTo (187j.88);
Ctx.lineTo (48 and 87);
Ctx.closePath ();
Ctx.stroke ();
}
})
})
< / script >
< / body >
< / html >