CSV data processed in canvas

See more:

Javascript

CSV

HTML5

I want to read some data from a CSV file and create multiple canvases that contains the data from my CSV. I want each line of the CSV to have it's own canvas.
This is how i read the data from my 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>

This is how i want my canvas to look:

<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>

And this is a function to complete the data from my CSV into my canvas (I used this function when i completed the data from a html form):

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);
    }

How can i modify this code so i can put it into my `var strOut =` from my main page?
I know i can access the data from my CSV using the var field using field[0], field[1], field[2] and field[3].

What I have tried:

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>';