CSV data processed in canvas

JavaScript
1

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

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

I tried doing something like this but it doesn’t work:

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

This isn’t really what canvas is for, is there a reason why you’re trying to do this on canvas instead of as normal DOM elements?

3

After i process my data from the CSV and put it into the canvas i want to be able to download the canvas as a image to create some badges. So i need to do that using canvas or svg.

4

I modified the code. Now it looks like this:

<!DOCTYPE html>
<html>

<head>
  <title>BaGr (Badge Generator)</title>
</head>


<body>
<h3>Create</h3>
<div id="output">
<script>
	
   const output = document.getElementById("output");
   let objects = [];
   function init() {
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function (){
            if(this.readyState == 4 && this.status == 200) {
				//console.log(this.responseText);
                //parsing objects, so reusable
                objects = generateObjects(this.responseText);
                //once objects are parsed generate view
				console.log(JSON.stringify(objects));;
                generateView();
            }
        }
        xhttp.open("GET", "test.txt", true);
        xhttp.send();
    }

    generateObjects = (responseText) => {
        const lines = responseText.split("\n");
        return lines.map(lineRaw=>{
             const line = lineRaw.split(',');
             if(line.length !== 4){
                console.warn("Line error.");
                return undefined;
             }

             return {name: line[0], surname: line[1], sex: line[2], role: line[3]};
        });
    }

    generateView = () => {
       output.innerHTML = objects.map(object=>generateCanvas(object).outerHTML).join("");
    }

    generateCanvas = (line) => {
       const canvas = document.createElement("canvas");
       const context = canvas.getContext("2d");
       let pos = 230;
       for(let key in line){
          if(line.hasOwnProperty(key)){
             context.fillText(`${key.toUpperCase()}: `, 30, pos);
             context.fillText(line[key], 150, pos);
             pos += 20;
          }
       }
       return canvas;
    }
	window.onload = init;
</script>
</div>
</body>
</html>

In the inspect mode i see the canvases that are created but they don’t appear on my page.

5

oh ok, cool!

Do you have a sample of the CSV data?

I can see 1 thing off the bat in that code you posted. You need a </div> tag.

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.