Quero desenhar uma linha vertical entre os círculos no meu projeto.

e estes são meus códigos:

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>

e teses são código 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();

Como posso desenhar uma linha vertical entre círculos? quando tentei fazer isso, me tornei esta imagem:

e este é o meu código js:

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

por favor ajude para este problema!
Obrigado!