Hi,
I am trying to make this simple page in which i have 10 text fields and I display the user’s entered text on the canvas. When html page is loaded the canvase loads a picture as background image and after that user enters some text in 10 text fields and upon pressing preview button it should show text in the canvas. If user needs to alter then they can again change anything in the text fields and upon pressing the Preview button it should show the new text and remove the old but its not happening. I also tried using save() and restore() but to no avail.
How to do ? Below is my code.
Thanks.
<!DOCTYPE HTML>
<html>
<head>
<script>
function doCardPreview()
{
ctx.clearRect(0, 0, canvas.width, canvas.height);
var imageObj = new Image();
imageObj.onload = function() { ctx.drawImage(imageObj, 0, 0); };
imageObj.src = 'card1.jpg';
// Now, Fill text on the freshly loaded image
// field 1
ctx.font = "25px Arial Narrow";
ctx.fillStyle = "#722A4B";
ctx.textAlign="right";
ctx.fillText(frmData.field1.value,230,43);
// field 2
ctx.font = "12px Arial";
ctx.fillStyle = "#808080";
ctx.textAlign="right";
ctx.fillText(frmData.field2.value,230,58);
// field 3
ctx.font = "13px Arial";
ctx.fillStyle = "#000000";
ctx.textAlign="right";
ctx.fillText(frmData.field3.value,230,115);
// field 4
ctx.font = "13px Arial";
ctx.fillStyle = "#000000";
ctx.textAlign="right";
ctx.fillText(frmData.field4.value,230,135);
// RIGHT COL
// field 5
ctx.font = "25px Arial Narrow";
ctx.fillStyle = "#656464";
ctx.textAlign="left";
ctx.fillText(frmData.field5.value,265,43);
// field 6
ctx.font = "13px Arial";
ctx.fillStyle = "#808080";
ctx.textAlign="left";
ctx.fillText(frmData.field6.value,265,70);
// field 7
ctx.font = "13px Arial";
ctx.fillStyle = "#808080";
ctx.textAlign="left";
ctx.fillText(frmData.field7.value,265,86);
// field 8
ctx.font = "13px Arial";
ctx.fillStyle = "#808080";
ctx.fillText(frmData.field8.value,265,102);
// field 9
ctx.font = "13px Arial";
ctx.fillStyle = "#808080";
ctx.fillText(frmData.field9.value,265,118);
// field 10
ctx.font = "13px Arial";
ctx.fillStyle = "#808080";
ctx.fillText(frmData.field4.value,265,134);
}
</script>
</head>
<body>
<form id="frmData" name="frmData">
<table border="0" cellpadding="3" align="center">
<tr>
<td><input type="text" name="field1" value="Name and Surname" /></td>
<td><input type="text" name="field2" value="Job Description" /></td>
</tr>
<tr>
<td><input type="text" name="field3" value="+91 9888-488-488" /></td>
<td><input type="text" name="field4" value="email.address@yourcompany.com" /></td>
</tr>
<tr>
<td><input type="text" name="field5" value="Company Name" /></td>
<td><input type="text" name="field6" value="Address Line 1" /></td>
</tr>
<tr>
<td><input type="text" name="field7" value="Address or City" /></td>
<td><input type="text" name="field8" value="Mobile: +91 9888-488-488" /></td>
</tr>
<tr>
<td><input type="text" name="field9" value="Fax: +91 172 4568488" /></td>
<td><input type="text" name="field10" value="Web: www.yourcompany.com" /></td>
</tr>
</table>
<p align="center"><input type="button" name="btnPreview" value="Preview" onclick="doCardPreview();" /></p>
</form>
<p align="center">
<canvas id="myCanvas" width="490" height="290"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var imageObj = new Image();
imageObj.onload = function() { ctx.drawImage(imageObj, 0, 0); };
imageObj.src = 'card1.jpg';
</script>
</p>
</body>
</html>