CSV данные обрабатываются в canvas

---

Я хочу прочитать некоторые данные из CSV-файла и создать несколько холстов, содержащих данные из моего CSV. Я хочу, чтобы каждая строка CSV имела свой собственный холст.
Вот как я считываю данные из своего CSV файла:

<h3>Create</h3>
    <div id="output"></div>
    
    <script>
    	function init() {
    		var xhttp = new XMLHttpRequest();
    		xhttp.onreadystatechange = function (){
    			if(this.readyState == 4 && this.status == 200) {
    				console.log(this.responseText);
    				var lines = this.responseText.split("\n");
    				for (i=0; i<lines.lenght; i++) {
    					var field = lines[i].split(",");
    					var strOut = 
    				}
    				document.getElementById("output").innerHTML = strOut;
    			}
    		}
    		xhttp.open("GET", "test.txt", true);
    		xhttp.send();
    	}
    	window.onload = init;
    </script>

Вот как я хочу, чтобы мой холст выглядел:

<canvas id="canvas" width="250" height="380" style="border:1px solid #000000;">
    </canvas>
    <script>
    var c = document.getElementById("canvas");
    var context = c.getContext("2d");
    context.fillStyle = '#fff';
    context.fillRect(0, 0, canvas.width, canvas.height);
    // Create gradient
    var grd = context.createLinearGradient(10,10,200,0);
    grd.addColorStop(0,"#00BFFF");
    context.lineWidth = 2;
    // Fill with gradient
    context.fillStyle = grd;
    context.fillRect(0,60,250,70);
    context.font = "30px Comic Sans MS";
    context.fillStyle = 'black';
    context.strokeText("PASS: ", 80, 110);
    </script>

И это функция для завершения данных из моего CSV в мой холст (я использовал эту функцию, когда я завершил данные из html-формы):

function create() {
    
        var canvas = document.getElementById("canvas");
        var context = canvas1.getContext("2d");
            context1.fillText("Name: ", 30, 230);
            context1.fillText(document.getElementById("name").value, 150, 230);
            context1.fillText("Surnume: ", 30, 250);
            context1.fillText(document.getElementById("surnume").value, 150, 250);
            context1.fillText("Sex: ", 30, 270);
            context1.fillText(document.getElementById("sex").value, 150, 270);
            context1.fillText("Role: ", 30, 290);
            context1.fillText(document.getElementById("role").value, 150, 290);
    }

Как я могу изменить этот код, чтобы поместить его в свой `var strOut =` с моей главной страницы?
Я знаю, что могу получить доступ к данным из моего CSV с помощью поля var, используя поле[0], поле[1], поле[2] и поле[3].

Что я уже пробовал:

var strOut = '<canvas width="500" height="300">' +
        '<rect x="50" y="20" rx="20" ry="20" width="250" height="250" style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />' +
        '<text x="140" y="70" style="font-family: Times New Roman;font-size: 30px;stroke: #00ff00;fill: #0000ff;">' + 'Person:</text>' +
        '<text x="70" y="100" style="fill:black;">Name: ' + field[0] + '</text>' +
        '<text x="70" y="130">Surnume: ' + field[1] + ' </text>' +
        '<text x="70" y="160">Sex: ' + field[2] + ' </text>' +
    	'<text x="70" y="160">Role: ' + field[3] + ' </text>' +
        '</canvas>';

---