I am currently working on a project where I need to generate a personalized visiting card based on input data. The idea is to iterate over an object and retrieve the relevant information upon button click, displaying it on a canvas element. Initially, my plan was to showcase the details directly on the canvas by using fillText code. However, I am facing some challenges in aligning the content properly on the browser. I believe CSS adjustments regarding height and width might help, but I would appreciate some guidance on the best approach to achieve this.
Furthermore, after reading a blog post on Canvas-Sitepoint, I learned about the Canvas API's capability to add various shapes like rectangles. Instead of directly displaying the card details on the canvas, I intend to incorporate a transparent rectangle shape and overlay the data within it for a more interactive visualization. Any assistance in implementing this feature would be highly valuable to me.
var details = {
"Employees": [{
"ID": "Winterfall",
"FirstName": "John",
"LastName": "Snow",
"email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5c363334322f32332b1c2b353228392e3a3d3030723f3331">[email protected]</a>",
"call": 121212,
"Work": [{
"company": "Google",
"Designation": "Principle Architect"
}]
}, {
"ID": "Castly Rock",
"FirstName": "Tyrion",
"LastName": "Lannister",
"email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a4d0ddd6cdcbcae8c5cae4e7c5d7d0c8dd8ac7cbc9">[email protected]</a>",
"call": 111111,
"Work": [{
"company": "Amazon",
"Designation": "Vice President"
}]
}, {
"ID": "High Garden",
"FirstName": "Samuel",
"LastName": "Tally",
"email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4f1c2e223a2a233b2e2323360f27262827282e3d2b2a21612c2022">[email protected]</a>",
"call": 777777,
"Work": [{
"Company": "Yahoo",
"Designation": "Consultant"
}]
}]
};
function getEmployeeData() {
var self = details,
arr = [],
value = document.getElementById("inputElement").value,
isEmpId = self.Employees,
len = isEmpId.length;
for (var i = 0; i < len; i++) {
if (value === isEmpId[i].ID) {
var name = isEmpId[i].FirstName + " " + isEmpId[i].LastName
call = isEmpId[i].call, email = isEmpId[i].email, company = isEmpId[i].Work[0].company,
title = isEmpId[i].Work[0].Designation;
drawCard(name, title, company, email, call);
return true;
}
}
};
function drawCard(m, n, o, p, q) {
var canvas = document.getElementById("rectangleCanvas");
var context = canvas.getContext("2d");
//context.textAlign = "center"
context.fillText(m, 100, 100);
context.fillText(n, 200, 50);
context.fillText(o, 300, 60);
context.fillText(p, 400, 70);
context.fillText(q, 500, 80);
//drawText(320, 080, "DEEPAK DWIJ", "rgb(80,80,80)");
// var x = 20, y = 80, width=100, height=80;
// var shape = new Path2D();
// shape.rect(x+100,y-50,width-40,height);
// context.fillStyle = "#00695c";
// context.fill(shape);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<h4>Business card</h4>
<input type="text" id="inputElement" placeholder="Enter employee id">
<button id="button" onclick="getEmployeeData()">Click to get Data</button>
<br>
<hr>
<div>
<canvas id="rectangleCanvas" height="300" width="500" style="border: solid 1px black;"></canvas>
</div>