Я хочу нарисовать вертикальную линию между кругами в моем проекте.

и это мои коды:

HTML:

    <div id="ways" style="width:1000px;margin:0 auto;height:100%;">
        <div id="row1">
            <div id="col11" class="r1"><canvas id="col111" width="578" height="200"></canvas></div>
            <div id="col12" class="r1"><canvas id="col112" width="578" height="200"></canvas></div>
            <div id="col13" class="r1"><canvas id="col113" width="578" height="200"></canvas></div>
        </div>
        <div id="row2">
            <div id="col21" class="r1"><canvas id="col221" width="578" height="200"></canvas></div>
            <div id="col22" class="r1"><canvas id="col222" width="578" height="200"></canvas></div>
            <div id="col23" class="r1"><canvas id="col223" width="578" height="200"></canvas></div>
        </div>
        <div id="row3">
            <div id="col31" class="r1"><canvas id="col331" width="578" height="200"></canvas></div>
            <div id="col32" class="r1"><canvas id="col332" width="578" height="200"></canvas></div>
            <div id="col33" class="r1"><canvas id="col333" width="578" height="200"></canvas></div>
        </div>
    </div>

и тезисы являются JS-кодом:

var canvas = document.getElementById('col111');
                var context = canvas.getContext('2d');
                var centerX = canvas.width / 2;
                var centerY = canvas.height / 2;
                var radius = 70;

                context.beginPath();
                context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
                context.fillStyle = 'green';
                context.fill();
                context.lineWidth = 5;
                context.strokeStyle = '#003300';
                context.stroke();

                var canvas = document.getElementById('col112');
                var context = canvas.getContext('2d');
                var centerX = canvas.width / 2;
                var centerY = canvas.height / 2;
                var radius = 70;

                context.beginPath();
                context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
                context.fillStyle = 'green';
                context.fill();
                context.lineWidth = 5;
                context.strokeStyle = '#003300';
                context.stroke();

                var canvas = document.getElementById('col113');
                var context = canvas.getContext('2d');
                var centerX = canvas.width / 2;
                var centerY = canvas.height / 2;
                var radius = 70;

                context.beginPath();
                context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
                context.fillStyle = 'green';
                context.fill();
                context.lineWidth = 5;
                context.strokeStyle = '#003300';
                context.stroke();


                var canvas = document.getElementById('col221');
                var context = canvas.getContext('2d');
                var centerX = canvas.width / 2;
                var centerY = canvas.height / 2;
                var radius = 70;

                context.beginPath();
                context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
                context.fillStyle = 'green';
                context.fill();
                context.lineWidth = 5;
                context.strokeStyle = '#003300';
                context.stroke();

                var canvas = document.getElementById('col222');
                var context = canvas.getContext('2d');
                var centerX = canvas.width / 2;
                var centerY = canvas.height / 2;
                var radius = 70;

                context.beginPath();
                context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
                context.fillStyle = 'green';
                context.fill();
                context.lineWidth = 5;
                context.strokeStyle = '#003300';
                context.stroke();

                var canvas = document.getElementById('col223');
                var context = canvas.getContext('2d');
                var centerX = canvas.width / 2;
                var centerY = canvas.height / 2;
                var radius = 70;

                context.beginPath();
                context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
                context.fillStyle = 'green';
                context.fill();
                context.lineWidth = 5;
                context.strokeStyle = '#003300';
                context.stroke();

Как я могу нарисовать вертикальную линию между кругами? когда я попытался сделать это, стал этот образ:

и это мой код JS:

 var canvas = document.getElementById('col221');
            var context = canvas.getContext('2d');
            context.beginPath();
            context.moveTo(290, -100);
            context.lineTo(290, 80);
            context.stroke();

пожалуйста, помогите для этой проблемы!
Спасибо!