CSV data procesata in canvas

Vreau sa citesc datele dintr-un fisier CSV si apoi sa le pun intr-un canvas. Vreau ca pentru fiecare linie din fisierul CSV sa imi creez un canvas care sa contina acele date.

Aici imi citesc datele din 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>


Asta este un cod pe care l-am folosit cand an citit aceleasi date dar cu ajutorul unui formular html:

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

Si asta este functia pe care am folosit-o ca sa imi completez datele din formular in canvas:

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

Cum as putea sa modific codul pentru canvas ca sa il pot folosi in `var strOut =` ?

Stiu ca pot sa imi accesez datele de pe fiecare rand folosind field[0], field[1], field[2] and field[3].

Am incercat sa fac asa ceva dar nu merge:

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

Edited by MarianG, 01 December 2020 - 12:25.
code

Nu inteleg intrebarea, poti sa faci un JSFiddle si sa zici ce nu merge? Primesti erori?

De ce ai vrea un string cu un element canvas cu subnoduri SVG?

 dani.user, on 10 iunie 2018 - 23:12, said:

"Backwards compatibility" probabil. Ce e in corpul tag-ului canvas este afisat doar daca browser-ul nu suporta acel element (adica nu trebuie sa iti bati capul cu el pe browserele moderne).